5.7　会弹出的面板

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

图5-23　手机人人网

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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