mg不朽情缘是什么

書名：構(gòu)建跨平臺(tái)APP：jQuery Mobile移動(dòng)應(yīng)用實(shí)戰(zhàn)（第2版）（跨平臺(tái)移動(dòng)開發(fā)叢書）
作者名：李柯泉
本章字?jǐn)?shù)： 378字
更新時(shí)間： 2020-11-28 23:45:51

5.5 導(dǎo)航欄的全屏屬性

現(xiàn)在再看一組代碼：

        01    .ui-header-fixed, .ui-footer-fixed{left:0; right:0; width:100%; position:
    fixed; z-index:1000}
        02    .ui-header-fixed{top:-1px; padding-top:1px}
        03    .ui-header-fixed.ui-fixed-hidden{top:0; padding-top:0}
        04    .ui-footer-fixed{bottom:-1px; padding-bottom:1px}
        05    .ui-footer-fixed.ui-fixed-hidden{bottom:0; padding-bottom:0}
        06    .ui-header-fullscreen, .ui-footer-fullscreen{filter:Alpha(Opacity=90);
    opacity:.9}
        07    .ui-page-header-fixed{padding-top:2.6875em}
        08    .ui-page-footer-fixed{padding-bottom:2.6875em}

上面代碼中的第6行，竟然設(shè)定了某種樣式下的頭部欄和尾部欄要保持一定的透明度。原來導(dǎo)航欄還有一個(gè)data-fullscreen的屬性，下面是使用該屬性的一個(gè)例子。

【范例5-7 導(dǎo)航欄使用data-fullscreen的一個(gè)例子】

        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-fullscreen="true"><! --頭部欄加入全屏屬性
    -->
        14                  <a href="#">返回</a>
        15                  <h1>頭部欄</h1>
        16                  <a href="#">設(shè)置</a>
        17               </div>
        18             <h1>導(dǎo)航欄的使用 </h1>
        19             <h1>導(dǎo)航欄的使用 </h1>
        20             <h1>導(dǎo)航欄的使用 </h1>
        21             <h1>導(dǎo)航欄的使用 </h1>
        22             <h1>導(dǎo)航欄的使用 </h1>
        23             <h1>導(dǎo)航欄的使用 </h1>
        24             <h1>導(dǎo)航欄的使用 </h1>
        25             <div data-role="footer" data-fullscreen="true"><! --尾部欄加入全屏屬性
    -->
        26                    <div  data-role="navbar">
        27                          <ul>
        28                            <li><a  id="weixin"  href="#"  data-icon="plus"> 微信
    </a></li>
        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  "> 設(shè)置
    </a></li>
        32                          </ul>
        33                    </div>
        34               </div>
        35         </div>
        36    </body>
        37    </html>

運(yùn)行結(jié)果如圖5-19所示。

圖5-19 data-fullscreen屬性的使用

仔細(xì)觀察圖5-19可以發(fā)現(xiàn)，頭部欄和尾部欄確實(shí)有了一點(diǎn)透明的效果（尾部欄中尤其明顯）。

為什么會(huì)有這個(gè)屬性呢？當(dāng)然是為了讓用戶能有一種全屏的感受。想一想，一些用戶交互性較好的視頻播放器，在全屏播放視頻時(shí)是不是會(huì)以半透明的形式來顯示進(jìn)度條？不過筆者覺得透明度應(yīng)該再加強(qiáng)一些會(huì)更好。

官术网_书友最值得收藏!

構(gòu)建跨平臺(tái)APP：jQuery Mobile移動(dòng)應(yīng)用實(shí)戰(zhàn)（第2版） （跨平臺(tái)移動(dòng)開發(fā)叢書）

5.5 導(dǎo)航欄的全屏屬性

構(gòu)建跨平臺(tái)APP：jQuery Mobile移動(dòng)應(yīng)用實(shí)戰(zhàn)（第2版）（跨平臺(tái)移動(dòng)開發(fā)叢書）