5.6 内容栏的使用

上一节介绍了工具栏中一个名为data-fullscreen的属性，可能有些读者会感觉一头雾水，下面先来看范例5-8的内容。

【范例5-8 在页面中加入内容栏】

        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             <div data-role="content">                            <! --内容栏-->
        19                  <h1>内容栏的使用</h1>
        20                  <h1>内容栏的使用</h1>
        21                  <h1>内容栏的使用</h1>
        22                  <h1>内容栏的使用</h1>
        23                  <h1>内容栏的使用</h1>
        24                  <h1>内容栏的使用</h1>
        25                  <h1>内容栏的使用</h1>
        26                  <h1>内容栏的使用</h1>
        27                  <h1>内容栏的使用</h1>
        28                  <h1>内容栏的使用</h1>
        29               </div>
        30             <div data-role="footer" data-position="fixed">      <! --尾部栏-->
        31                    <div  data-role="navbar">
        32                          <ul>
        33                            <li><a  id="weixin"  href="#"  data-icon="plus"> 微信
    </a></li>
        34                            <li><a id="tongxun" href="#" data-icon="plus">通讯录
    </a></li>
        35                            <li><a  id="friend"  href="#"  data-icon="plus">找朋友
    </a></li>
        36                            <li><a   id="set"   href="#"   data-icon="plus">  设  置
    </a></li>
        37                          </ul>
        38                    </div>
        39               </div>
        40         </div>
        41    </body>
        42    </html>

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

图5-20 内容栏的使用

读者请先将上一节中的范例效果同样拖曳到最顶端，界面如图5-21所示。将两个界面做一下简单的对比，会发现笔者之前特意截取掉的侧面进度条又显示了出来（这部分只在PC端会有，手机浏览器上不显示），这是有一定目的的。

图5-21 工具栏加入了fullscreen属性

首先，通过侧面的进度条可以知道两个页面都被拖曳到了最顶端，可是在图5-20的第一行字的顶端与头部栏的底端仍有一定的距离。而图5-21中第一行字的顶端却直接顶在了屏幕的顶端，这是第一点不同之处。

其次，可以看到图5-20的内容左侧明显多出了一部分外边距，这是因为fullscreen属性使页面内其他内容可以忽略工具栏的存在而全屏显示。

事实上，内容栏的存在还有一个“隐性”的作用，请读者看本例在Notepad++中的代码截图，如图5-22所示。页面的缩进结构非常清晰明确，大大加强了页面的可维护性，这一优势现在还看不出来，但是在今后大型应用的开发中将会体现得越来越明显。

图5-22 本范例代码截图

提示

优秀的可维护性也是jQuery Mobile的一大优点，因此在开发jQuery Mobile应用时一定要遵循header、content、footer这种顺序排列的良好习惯。

上一章目录下一章