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 导航栏的使用】

        01   <! DOCTYPE html>                                                   <! --声明HTML 5-->
        02
        03    <head>
        04    <meta  http-equiv="Content-Type"  content="text/html;  charset=utf-8"  />
    <! --声明编码方式-->
        05    <meta name="viewport" content="width=device-width, initial-scale=1">
        06   <! --<script src="cordova.js"></script>-->  <! --备用生成APP的JS文件-->
        07   <link  rel="stylesheet"  href="jquery.mobile.min.css"  /><! -- 引入  jQuery
    Mobile样式-->
        08   <script src="jquery-2.1.4.min.js"></script>     <! --引入jQuery脚本-->
        09   <script src="jquery.mobile.min.js"></script>    <! --引入jQuery Mobile脚
    本-->
        10    </head>
        11    <body>
        12         <div data-role="page">
        13               <div data-role="header" data-position="fixed">
        14                  <a href="#">返回</a>
        15                  <h1>头部栏</h1>
        16                  <a href="#">设置</a>
        17               </div>
        18             <h1>导航栏的使用 </h1>
        19             <h1>导航栏的使用 </h1>
        20             <h1>导航栏的使用 </h1>
        21             <h1>导航栏的使用 </h1>
        22             <h1>导航栏的使用 </h1>
        23             <h1>导航栏的使用 </h1>
        24             <h1>导航栏的使用 </h1>
        25               <div data-role="footer" data-position="fixed">
        26                  <div  data-role="navbar">             <! --导航栏栏开始  -->
        27                       <ul>                                   <! --使用ul标签-->
        28                            <li><a  id="weixin"  href="#"  data-icon="plus"> 微信
    </a></li>
                        <! --使用li标签嵌套a标签即会自动生成导航栏的样式
        29                  <li><a id="tongxun" href="#" data-icon="plus">通讯录</a></li>
        30                  <li><a id="friend" href="#" data-icon="plus">找朋友</a></li>
        31                  <li><a id="set" href="#" data-icon="plus">设置</a></li>
        32                       </ul>                                      <! --导航栏结束-->
        33                    </div>
        34               </div>
        35         </div>
        36    </body>
        37    </html>

运行结果如图5-17所示。

图5-17 工具栏的使用

第25～34行的内容为尾部栏，但是其中加入了一个新的标签<div data-role="navbar">。在这个标签中嵌套使用了<ul>与<li>标签，使导航栏自动被分成了4栏。

提示

并不一定要分成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给出了许多可以直接调用的图标，具体使用方法将在本书接下来的“按钮”一章中详细介绍。

上一章目录下一章