12、jQuery Mobile 工具条与按钮设计指南

jQuery Mobile 工具条与按钮设计指南

1. 持久导航栏的创建

在移动页面设计中，创建一个在页面间持久显示的导航栏是提升用户体验的重要方式。通过结合之前所学的知识，我们可以在页脚工具条中创建这样的导航栏，还能添加额外样式，让用户清楚地知道当前所在页面。

以下是创建页脚工具条中持久导航栏所需的代码：

<div data-role="footer" data-position="fixed" data-id="rps">
  <div data-role="navbar">
    <ul>
      <li><a href="persistent_rock.html" class="ui-btn-active ui-state-persist">Rock</a></li>
      <li><a href="persistent_paper.html">Paper</a></li>
      <li><a href="persistent_scissors.html">Scissors</a></li>
    </ul>
  </div>
</div>

代码解释如下：
- 第 1 行的 div 元素带有 data-role="footer" 、 data-position="fixe