糖果派技巧攻略彩球爆分

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

5.2 方便的快捷鍵

上一節(jié)連續(xù)給出了3個實例，已經(jīng)將工具欄的基本使用方法講解得非常透徹了，本節(jié)就帶領(lǐng)讀者更上一層樓。圖5-11是一款音樂播放器的界面，其中有一個非常明顯的頭部欄，在頭部欄的左側(cè)有一個“返回”按鈕，它的功能是返回之前的界面。

圖5-11 工具欄按鈕的一個例子

在jQuery Mobile中可以很容易地實現(xiàn)這種布局樣式，接下來將在范例5-4中實現(xiàn)，這種效果的方法。

【范例5-4 頭部欄中的返回鍵】

        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="#">設(shè)置</a>               <! --另一個按鈕-->
        17               </div>
        18               <h1>
        19                  有按鈕的頭部欄
        20               </h1>
        21               <div data-role="footer" data-position="fixed">
        22                  <h1>尾部欄</h1>
        23               </div>
        24         </div>
        25    </body>
        26    </html>

運行結(jié)果如圖5-12所示。

圖5-12 有按鈕的頭部欄

在圖中可以看到頭部欄上多了兩個按鈕，頭部欄中的按鈕卻與真正的按鈕有所區(qū)別。

首先，在頭部欄中使用標(biāo)簽<a>后，標(biāo)簽中的內(nèi)容會自動轉(zhuǎn)化為按鈕的樣式（見代碼第14行與第16行）。

其次，在頭部欄中使用按鈕，將會自動與標(biāo)題等內(nèi)容排成一行而不是一行一行地顯示，這一點是jQuery Mobile非常明智的決定。再深入學(xué)習(xí)jQuery Mobile后就會發(fā)現(xiàn)，jQuery Mobile中的大多數(shù)控件都是一個空間占有獨立的一行多行排列的，而頭部欄按鈕卻與內(nèi)容在同一行。

提示

本范例并沒有為按鈕加入鏈接，在這種情況下（專指在頭部欄中的按鈕）會默認(rèn)被渲染成“返回”鍵的功能。

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

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

5.2 方便的快捷鍵

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