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的作者也设定了相应的优先级规则，在面板被打开时，单击原页面的内容将会优先关闭面板，因此，这时单击并不会使状态栏隐藏，同样地，本例中原页面中的按钮在面板被激活时也是无法被单击的。