panel

jQuery Mobile中的面板会在屏幕的左侧向右侧划出。可以通过指定id的div元素添加 data-role="panel" 属性来创建面板。

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

panel标记必须置于头部、内容、底部组成的页面之前或之后。

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h2>面板头部..</h2>
    <p>面板中的一些文本内容..</p>
  </div>
  <div data-role="header">
      <h1>汇智网</h1>
   </div>
 </div>

要访问面板，需要创建一个指向面板的链接，点击该链接即可打开面板：

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

默认情况下，面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧，可以指定 data-position="right" 属性。

<a href="#myPanel" class="ui-btn ui-btn-inline"　data-position="right">打开面板</a>

可以通过使用 data-display 属性来控制面板的展示方式:

<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">       <!--推动显示-->

可以使用按钮来关闭面板：仅需要在面板的div中添加 data-rel="close" 属性。

<div data-role="panel" id="myPanel"> 
  <h2>面板头部..</h2>
  <p>面板中的一些文本内容..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">关闭面板</a>
</div>