5.3 失效的按钮

上一节分享了一个在头部栏中加入按钮的例子，读者可以知道，只要在头部栏中加入标签<a>，它就能被自动渲染成按钮的样子。但是假如不需要使用这些样式，该怎么办呢？也许直接修改CSS文件中的样式是一个不错的办法，但是这样未免有些太麻烦了，这里介绍一种更好的办法，如范例5-5所示。

【范例5-5 让头部栏中的按钮失效】

        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                  <div>                                 <! --这里加入一个<div>标签-->
        15                       <a href="#">返回</a>                    <! --这不是一个按钮-->
        16                       <h1>头部栏</h1>
        17                       <a href="#">设置</a>                    <! --这也不是一个按钮-->
        18                    </div>
        19               </div>
        20               <h1>
        21                  有按钮的头部栏
        22               </h1>
        23               <div data-role="footer" data-position="fixed">
        24                  <h1>尾部栏</h1>
        25               </div>
        26         </div>
        27    </body>
        28    </html>

运行效果如图5-13所示。

图5-13 让头部栏中的按钮效果消失

通过与图5-12对比可以清楚地看出，头部栏中原本应该是按钮的地方变成了链接的样式，看来jQuery Mobile取消了对标签<a>的渲染。先看范例代码第13～19行，这部分声明了页面的头部栏内容，但是对比范例5-2中这部分的内容可以发现，在第14行和第18行多了一个div标签。

提示

在jQuery Mobile中，有时会出现某些标签被默认渲染成某种样式的情况（比如头部栏中的<a>标签）。如果不想使用这种样式，可以试着在该标签外套一个<div>（或是其他对页面没有影响的标签），然后看看是否会有满意的结果。

虽然用回链接的样式，再看一下图5-13的界面，实在是太丑了，因此一定不要忘记把链接的样式修改得美观一点。

上一章目录下一章