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"属性面板：