jQuery Mobile的面板
在jQuery Mobile的面板就會從屏幕左邊或右邊額外的內容滑出。
要創建面板，添加data-role="panel"屬性到<div>元素，並指定一個id 。
添加任何HTML標記這裡面<div>要在你的面板中顯示：
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>注意：面板標記必須之前或標題，內容和頁腳一個jQuery Mobile的頁面中後放置。
要訪問面板，創建一個指向鏈接id面板<div> 當用戶點擊該鏈接時，面板將打開：
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>這是一個基本的面板例如：
例
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> 試一試» 面板閉幕
你可以通過點擊它的外面，通過滑動或按關閉面板Esc鍵。 您可以通過添加額外的禁用點擊和刷卡功能data-*屬性面板<div>
| 屬性 | 值 | 描述 | 例 |
|---|---|---|---|
| data-dismissible | true | false | 指定是否該面板可以通過點擊它的外面被關閉，或不 | 嘗試一下 |
| data-swipe-close | true | false | 指定是否面板可以通過滑動關閉，或不 | 嘗試一下 |
您也可以通過一個按鈕關閉面板：只需添加面板內的鏈接<div>與data-rel="close"屬性附加到它。 而對於兼容性的原因，你也應該指定href屬性指向頁面的ID的用戶應該關閉面板時：
例
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> 試一試» 面板顯示
可以控制與數據顯示屬性面板的顯示模式：
| 屬性值 | 描述 |
|---|---|
| data-display="overlay" | 顯示面板上的內容 |
| data-display="push" | 動畫面板，並在同一時間的頁面都 |
| data-display="reveal" | 默認。 該小組將坐在頁面之下，顯示在頁面溜走了 |
例
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > 試一試» 定位板
默認情況下，面板將出現在屏幕的左側。 為面板上的屏幕的右邊出現，指定data-position="right"屬性。
您還可以指定根據頁面的其餘部分面板的內容應該如何定位，當用戶開始滾動。 默認情況下，該小組將與頁面（但面板的內容都留在了頁面頂部）滾動。 如果你總是想顯示面板的內容，不管你多遠滾動頁面，添加data-position-fixed="true"屬性面板：