5.7 会弹出的面板

严格地讲，将本节内容放在这里不是非常合适，但是jQuery Mobile文档中对本章要讲的面板控件也没有给出合适的定位，而笔者又不愿意为这样一节内容单独分出一章，再加上该控件确实适合用来实现导航栏相关的效果，因此就将这个内容放在了本章。先来看看图5-23所示的界面。

图5-23 手机人人网

这是手机人人网的一个界面，当登录人人网之后首先会显示好友们的“状态”列表，单击“返回”按钮将会出现如图5-23所示的界面，通过该界面的导航可以选择手机人人网的其他功能。这样的效果正是通过本节要介绍的面板控件来实现的，请看范例5-9。

【范例5-9 会弹出的工具栏】

        01   <! DOCTYPE html>                                         <! --声明HTML 5-->
        02
        03    <head>
        04    <meta  http-equiv="Content-Type"  content="text/html;  charset=utf-8"  />
    <! --声明编码方式-->
        05    <meta name="viewport" content="width=device-width, initial-scale=1">
        06   <! --<script src="cordova.js"></script>-->   <! --备用生成APP的JS文件-->
        07   <link  rel="stylesheet"  href="jquery.mobile.min.css"  /><! -- 引入  jQuery
    Mobile样式-->
        08   <script src="jquery-2.1.4.min.js"></script><! --引入jQuery脚本-->
        09   <script src="jquery.mobile.min.js"></script><! --引入jQuery Mobile脚本-->
        10    <script>
        11        $( "#mypanel" ).trigger( "updatelayout" ); <! --对面板进行声明-->
        12    </script>
        13    </head>
        14    <body>
        15         <div data-role="page">
        16             <div data-role="panel" id="mypanel">    <! --这个就是面板-->
        17                  <h4>这个就是面板</h4>                    <! --面板中加入内容-->
        18               </div>
        19               <div data-role="header" data-position="fixed">
        20                  <a href="#mypanel">打开</a>
        21                  <h1>头部栏</h1>
        22                  <a href="#">隐藏</a>
        23               </div>
        24               <div data-role="content">
        25                  <h1>面板可以弹出</h1>
        26                  <h1>面板可以弹出</h1>
        27                  <h1>面板可以弹出</h1>
        28                  <h1>面板可以弹出</h1>
        29                  <h1>面板可以弹出</h1>
        30                  <h1>面板可以弹出</h1>
        31                  <h1>面板可以弹出</h1>
        32                  <h1>面板可以弹出</h1>
        33                  <h1>面板可以弹出</h1>
        34                  <h1>面板可以弹出</h1>
        35                  <h1>面板可以弹出</h1>
        36                  <h1>面板可以弹出</h1>
        37                  <h1>面板可以弹出</h1>
        38                  <h1>面板可以弹出</h1>
        39               </div>
        40               <div data-role="footer" data-position="fixed">
        41                    <div data-role="navbar">
        42                          <ul>
        43                       <li><a id="chat" href="#" data-icon="plus">微信</a></li>
        44                       <li><a id="email" href="#" data-icon="plus">通讯录</a></li>
        45                       <li><a id="skull" href="#" data-icon="plus">找朋友</a></li>
        46                       <li><a id="beer" href="#" data-icon="plus">设置</a></li>
        47                          </ul>
        48                    </div>
        49               </div>
        50         </div>
        51    </body>
        52    </html>

运行结果分别如图5-24和图5-25所示。

图5-24 打开后的页面，面板未弹出

图5-25 面板被呼出展开显示

图5-24看上去与上一节的例子没什么不同，可是代码确实改变了，而且很明显在页面中加入了一个新的控件。

继续往下看会发现，笔者在头部栏做了一点小小的改动，原先的“返回”按钮被改成了“打开”，而且在代码第20行可以看到链接的目标地址也变成字符串“#mypanel”。这正是非常关键的一步，单击“打开”按钮之后，隐藏在侧面的面板突然侧滑显示出来了，效果如图5-25所示。

由于面板控件的使用相对比较复杂，因此笔者决定分步来描述面板控件的使用方法，以便于读者能够对面板控件的使用有一个清晰的认识。

打开上一节中给出的代码，在页面中任意位置（必须在page标签内，但是要在头部栏和尾部栏外）加入一个面板控件，格式如范例5-9中代码第16～18行所示，在面板控件中可以像一般页面一样加入内容。

给面板控件设置一个id，如本例中的id为mypanel。

插入一段JavaScript代码，声明该控件，如代码第10～12行所示。

在页面中选择一个用于打开面板的按钮，如本例中选用了第20行位于头部栏左侧的按钮，并将链接指向的地址改为该控件的id，并且不要忘记在id前加入“#”。

根据需要来设置面板的一些高级属性，如是否需要加入动画或者面板处于屏幕的左侧还是右侧等，本例选择了默认属性，即面板在左侧出现。

下面再给出关闭面板的方法。

首先为面板控件添加一组属性data-swipe-close="false"，然后在面板中加入一个按钮控件，比如：

        <a href="# mypanel" data-rel="close"  data-role="button">关闭面板 </a>

其中链接指向的地址依然是面板的id，这样就完成对面板进行关闭的操作。当单击该按钮时，面板将会自动被关闭，但是要注意该按钮必须被放置在面板中，因为当面板被激活时，面板外的按钮都是无效的。

提示

虽然可以为面板单独设置一个关闭按钮，但是笔者却认为这在大多数情况下没有必要的，因为只要单击原页面的任何区域，就能够起到关闭面板的作用。

在上一节讲过，单击页面中的空白区域会对工具栏进行隐藏或显示的切换，而在刚刚又讲到，单击原页面的空白处会自动关闭面板，而这显然是冲突的。为此，jQuery Mobile的作者也设定了相应的优先级规则，在面板被打开时，单击原页面的内容将会优先关闭面板，因此，这时单击并不会使状态栏隐藏，同样地，本例中原页面中的按钮在面板被激活时也是无法被单击的。

上一章目录下一章