jQuery Mobile 工具栏小部件完整参考

jQuery Mobile的工具栏小部件可帮助您在应用程序中创建标准工具栏，包括标题，按钮和选项卡。本参考文档将介绍每种工具栏小部件及其使用方法。

页面标题栏

页面标题栏是一个标准的标题栏，包括应用程序名称和一个后退按钮（可选）。以下是创建页面标题栏的代码：

<div data-role="header" data-position="fixed" data-theme="a">
  <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-notext">Back</a>
  <h1>Page Title</h1>
</div>

要说明的是：

• data-role="header" 指定了元素为页面标题栏。
• data-position="fixed" 将标题栏固定在屏幕顶部，并允许内容在其下显示。
• data-theme="a" 设置主题样式为a，可选样式有a, b, c, d, e。
• data-rel="back" 创建一个后退按钮，并返回前一个页面。

注意：为了保持单个页面应用程序的结构稳定，尽量不要随意返回到前一个页面。

工具栏按钮

工具栏按钮可用于在工具栏中添加操作按钮。以下是创建工具栏按钮的代码：

<div data-role="header" data-position="fixed" data-theme="a">
  <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-notext">Back</a>
  <h1>Page Title</h1>
  <a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn-right ui-btn ui-corner-all ui-shadow ui-icon-menu ui-btn-icon-notext">Menu</a>
</div>

<div data-role="popup" id="popupMenu" data-theme="a">
  <ul data-role="listview" data-inset="true">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

要说明的是：

• data-role="header" 指定了元素为页面标题栏。
• data-position="fixed" 将标题栏固定在屏幕顶部，并允许内容在其下显示。
• data-theme="a" 设置主题样式为a，可选样式有a, b, c, d, e。
• class="ui-btn-right" 将按钮放在工具栏右侧。
• href="#popupMenu" 指定了要弹出的菜单的ID。
• data-rel="popup" 指定了元素为弹出菜单。
• data-transition="slideup" 设置弹出菜单的动画效果。
• data-role="listview" 指定了元素为列表视图。
• data-inset="true" 设置边框为插入式。

注意：弹出菜单的ID和href属性必须匹配。

工具栏选项卡

工具栏选项卡可用于在工具栏中创建多个选项卡（每个选项卡表示一个页面）。以下是创建工具栏选项卡的代码：

<div data-role="header" data-position="fixed">
  <h1>Page Title</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#page1" class="ui-btn-active">Page 1</a></li>
      <li><a href="#page2">Page 2</a></li>
      <li><a href="#page3">Page 3</a></li>
    </ul>
  </div>
</div>

<div data-role="content">
  <div id="page1" class="ui-content">
    <h3>Page 1 content</h3>
  </div>

  <div id="page2" class="ui-content">
    <h3>Page 2 content</h3>
  </div>

  <div id="page3" class="ui-content">
    <h3>Page 3 content</h3>
  </div>
</div>

要说明的是：

• data-role="header" 指定了元素为页面标题栏。
• data-position="fixed" 将标题栏固定在屏幕顶部，并允许内容在其下显示。
• data-role="navbar" 指定了元素为选项卡导航栏。
• class="ui-btn-active" 将第一个选项卡标记为激活状态。
• href="#page1" 指定了选项卡关联的页面ID。

注意：选项卡导航栏必须在页面标题栏下面，且ID和href属性必须匹配。

结束语

现在，您已经了解了如何使用jQuery Mobile工具栏小部件来创建标准的工具栏、操作按钮和选项卡。继续深入研究和使用吧！