本文延续之前"使用 jQuery Mobile 与 HTML5 开发 Web App"系列文章，本文介绍的是 jQuery Mobile 中的 jQuery Mobile 工具栏。在 jQuery Mobile 中，有一套完整的工具栏和导航栏组件，这里的工具栏和导航栏并不只是提供了相应的外观样式，还自带有一些常用的辅助功能，下面 Kayo 为大家详细介绍。

 

也许你会奇怪，不是有工具栏和导航栏吗？为什么标题只写了工具栏！其实这里的工具栏和导航栏并不是分开的组件，而是统一的一套标准组件，既有工具栏的功能也有导航栏的功能，下文就直接简称工具栏了。

 

一.工具栏基础

在 jQuery Mobile 中，有两套标准工具栏——头部栏和尾部栏，头部栏通常是放在网页顶部，而尾部栏通常放在网站底部，值得注意的是，头部栏和尾部栏的位置并不依靠 CSS 和 JavaScript 定位，而是本身就处于文档流的顶部或底部，这样是为了尽量保证那些对于 CSS 和 JavaScript 支持并不好的设备也可以看到工具栏，另外也不用消耗多余的 CSS 和 JavaScript 资源。

 

可能在阅读上面这段话后，童鞋们可能有点迷惑，没关系，下面会分开介绍这些属性，相信阅读后便会理解 jQuery Mobile 的工具栏组件了。

 

二.头部栏

头部栏正如其名字所表达的，是处于页面头部的栏目，使用 data-role="header" 属性可以产生头部栏。除了表示标题的文字外，在头部栏的左边或右边可以放置几个可选的按钮，作为导航之用（返回上一页，回到首页等）。使用 h1 的 HTML 标签包裹文字，这段文字会被解释为标题文字，赋予相关的样式，而在 h1 标签的上下文中，可以通过使用按钮标记放置按钮，其中在 h1 标签上的按钮会被放置在头部栏左边，而在 h1 标签之下的按钮会被放置在头部栏右边。

 

如上面描述，在 h1 标签的上下文中，可以通过使用按钮标记放置按钮，通常自定义的按钮会使用 a 标签，给标签添加 data-rel="back" 属性会自动生成后退按钮，点击后退按钮返回的是历史记录中的上一个页面，而无视该 a 标签的 href 属性值，但是对于 C 级浏览器，情况刚好相反， C 级浏览器只会识别 href 属性值，而不会直接退回历史记录中的上一个页面，因此要设计一个良好的导航，也必须根据实际情况给 href 设定一个有意义的值，而提高 C 级浏览器的用户体验。除此之外，开发者还可以使用 data-icon 属性改变按钮上的 icon 小图标，而 data-icon 的可取值可以参考《 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮 》中的“带图标按钮”。

 

下面给出一个带有两个按钮的例子： 

          <div data-role="header">
    <a data-rel="back" href="#home" data-icon="delete">取消</a>
    <h1>常见头部栏</h1>
    <a href="#home" data-icon="check">保存</a>
</div>
 

效果：

这里必须强调一下，例子中的链接的 href 值为 "#home"，这是 jQuery Mobile 所支持的一种链接， "home" 指是一个 jQuery Mobile page 的 id 值，使用这种写法可以很方便的链接到该 page ，参考文章底部 Demo 的源码可以看到完整的代码。

 

另外开发者也可以使用 CSS class 来控制按钮的位置：

ui-btn-left 和 ui-btn-right class 分别是控制按钮在头部栏的左边和右边，并且设置相应的 class 后，按钮的位置只根据类来分配，与它们实际在 HTML 源码中的位置无关。 

          <div data-role="header">
    <a class= "ui-btn-right" href="#home" data-rel="back" data-icon="delete">取消</a>
    <h1>使用 CSS 类控制按钮位置的自定义头部栏</h1>
    <a class="ui-btn-left" href="#home" data-icon="check">保存</a>
</div>
 

效果：

 

三.尾部栏

在 jQuery Mobile 中，使用 data-role="footer" 可以产生尾部栏，尾部栏的情况跟头部栏基本相同，也支持放置按钮，通过 CSS 类调整按钮位置，这里给出一个基本的尾部栏例子： 

          <footer data-role="footer">
    <h2>Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>
</footer>
 

效果：

另外在尾部栏中添加一个按钮组可以很方便的做出一个工具栏，关于按钮组的使用可以参见 《 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮 》中的“按钮组”部分。

 

四.导航栏

导航栏可以为开发者提供一种简便的导航菜单方案，首先给出一个例子： 

          <div data-role="header">
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
</div>
 

这里说明一下，导航栏并不一定需要头部栏包裹，不过一般建议放在头部栏或尾部栏中。要设置某一个链接为活动状态（当前状态），可以给该链接添加 "ui-btn-active" 的 class ，如例子中设置了第一个链接为当前活动状态。

 

五.固定位置的工具栏与全屏的工具栏

我们可以给工具栏添加 data-position="fixed" 的属性，这样工具栏就会固定在页面中，并不随页面滚动而滚动了，当工具栏滚出屏幕后，可以通过点击屏幕使其再次出现。在此基础上，若再为工具栏添加 data-fullscreen="true" 属性，则能触发工具栏全屏模式，这样页面的主体内容会占满页面，然后通过点击屏幕使工具栏出现或消失。也许你会觉得这个情景很熟悉，的确，这种方式在一些 App 上很常见，比如视频网站的 App ，播放视频时显示进度条，音量按钮，清晰度选择等，点击屏幕工具条就会消失，需要时再次点击就会出现。现在这样的功能 Web App 也做到了，并且很简便，配合出 HTML5 的一些属性，也就能方便的做出一些很酷的 Web App！

 

固定位置的工具栏 

          <div data-role="header" data-position="fixed">
    <a href="#home" data-rel="back" data-icon="delete">取消</a>
    <h1>固定位置的工具栏</h1>
</div>
 

 

固定位置的全屏工具栏 

          <div data-role="header" data-position="fixed" data-fullscreen="true">
    <a href="#home" data-rel="back" data-icon="delete">取消</a>
    <h1>固定位置的工具栏</h1>
</div>
 

 

由于这里要显示的效果是动态的，就不放效果图了，建议大家直接查看完整 Demo 中相应的例子，其中“固定位置的全屏工具栏”在 PC 会出现相滚动条的情况，建议使用移动浏览器查看。

 

六.主题样式

与其他 jQuery Mobile 组件一样，工具栏也是支持使用主题样式的，可以使用 data-theme 属性在组件的标签上添加主题样式，该属性默认有五个值 a, b, c, d, e，分别代表由深到浅五种颜色，另外开发者还可以通过在 CSS 里添加相应的 class 来自定义颜色，而默认的样式则为 a ，即黑色。

 

七.完整 Demo

完整实例 Demo （建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览）

 

原文由 Kayo Lee 发表，原文链接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-toolbar.html