5.4 导航栏的应用
不知道读者有没有接触过选项卡这种控件，相信大多数人都是接触过的。图5-14、图5-15和图5-16分别给出3种选项卡图片，让读者先了解选项卡到底是什么样的。
图5-14 Web中常用的选项卡
图5-15 Windows中的选项卡
图5-16 手机微信界面中的选项卡
看到图5-16，读者也许会提出疑问，原来这也是选项卡啊！可是这和本节标题中的导航栏有什么关系呢？
原来，在移动App中，选项卡常常被用作一款应用的导航。如图5-16中的微信，尾部栏的导航栏就说明了微信的4大功能，即“发信息（微信）”“通讯录”“找朋友”和“设置”。
使用这样的导航栏（或者说选项卡）能够在手机屏幕面积有限的情况下实现更多的功能，相信大家也都深有体会，而且这种界面很重要的一个优点就是非常美观。下面就来实现这样的效果。
【范例5-6 导航栏的使用】
运行结果如图5-17所示。
第25~34行的内容为尾部栏，其中加入了一个新的标签<div data-role="navbar">。在这个标签中嵌套使用了<ul>与<li>标签，使导航栏自动被分成了4栏。
图5-17 工具栏的使用
提示
并不一定要分成4栏，分栏的数目是根据标签<li>的数量决定的，但是最多不超过5栏。
实际上这种写法并不是很标准，按照jQuery Mobile API上的规定，应当在navbar控件中加入一组属性来标识导航栏分为几栏，比如本例就应当写成：
<div data-role="navbar" data-grid="c">
其中data-grid的值“c”就表示将导航栏分为4部分，那么以此类推，“a”自然就表示分为两栏。值得注意的是，当分栏数目大于5时，导航栏将自动分为多行，图5-18是jQuery Mobile对这时的导航栏外观所做的截图。
图5-18 分为10栏的导航栏
提示
虽然说导航栏的一行最多可以分成5栏，建议最好不要分这么多栏，因为在一些屏幕较小的手机上可能无法显示完整的内容。
在navbar标签中继续使用标签<a>，同样可以让标签中的内容自动渲染为按钮，但是图5-16中的按钮显然与过去印象中的按钮有所不同，因为它带上了图标（在介绍按钮的章节里还会了解到这个图标）。第28行用data-icon="plus"属性设置图标为一个加号。
jQuery Mobile给出了许多可以直接调用的图标，具体使用方法将在本书接下来的“按钮”一章中详细介绍。