- 構建跨平臺APP：jQuery Mobile移動應用實戰（第2版） （跨平臺移動開發叢書）
- 李柯泉
- 1325字
- 2020-11-28 23:45:52
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的作者也設定了相應的優先級規則，在面板被打開時，單擊原頁面的內容將會優先關閉面板，因此，這時單擊并不會使狀態欄隱藏，同樣地，本例中原頁面中的按鈕在面板被激活時也是無法被單擊的。