jQuery Mobile 面板

jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。

通过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。

在 <div> 中添加 HTML 标记来显示你的面板内容:

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

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

要访问面板,需要创建一个指向面板 <div> id 的链接,点击该链接即可打开面板:

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

简单的面板实例

实例

<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 data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>