jQuery Mobile 工具欄

工具欄元素常被放置于頁(yè)眉和頁(yè)腳中 - 以實(shí)現(xiàn)“已訪問(wèn)”的導(dǎo)航：

標(biāo)題欄

頁(yè)眉通常會(huì)包含頁(yè)眉標(biāo)題/LOGO 或一到兩個(gè)按鈕（通常是首頁(yè)、選項(xiàng)或搜索按鈕）。

您可以在頁(yè)眉中向左側(cè)或/以及右側(cè)添加按鈕。

下面的代碼，將向頁(yè)眉標(biāo)題文本的左側(cè)添加一個(gè)按鈕，并向右側(cè)添加一個(gè)按鈕：

實(shí)例

<div data-role="header">
  <a href="#" data-role="button">首頁(yè)</a>
  <h1>歡迎來(lái)到我的主頁(yè)</h1>
  <a href="#" data-role="button">搜索</a>
</div>

親自試一試

下面的代碼將向頁(yè)眉標(biāo)題的左側(cè)添加一個(gè)按鈕：

<div data-role="header">
  <a href="#" data-role="button">首頁(yè)</a>
  <h1>歡迎來(lái)到我的主頁(yè)</h1>
</div>

不過(guò)，如果您在 <h1> 元素之后放置按鈕鏈接，那么它不會(huì)顯示在文本右側(cè)。如需向頁(yè)眉標(biāo)題的右側(cè)添加按鈕，請(qǐng)規(guī)定類名 "ui-btn-right"：

實(shí)例

<div data-role="header">
  <h1>歡迎來(lái)到我的主頁(yè)</h1>
  <a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>

親自試一試

提示：頁(yè)眉可包含一個(gè)或兩個(gè)按鈕，然而頁(yè)腳沒(méi)有限制。

頁(yè)腳欄

與頁(yè)眉相比，頁(yè)腳更具伸縮性 - 它們更實(shí)用且多變，所以能夠包含所需數(shù)量的按鈕：

實(shí)例

<div data-role="footer">
  <a href="#" data-role="button">轉(zhuǎn)播到新浪微博</a>
  <a href="#" data-role="button">轉(zhuǎn)播到騰訊微博</a>
  <a href="#" data-role="button">轉(zhuǎn)播到 QQ 空間</a>
</div>

親自試一試

注釋：頁(yè)腳與頁(yè)眉的樣式不同（它會(huì)減去一些內(nèi)邊距和空白，并且按鈕不會(huì)居中）。如果要修正該問(wèn)題，請(qǐng)?jiān)陧?yè)腳設(shè)置類名 "ui-btn"：

實(shí)例

<div data-role="footer" class="ui-btn">

親自試一試

您也能夠選擇在頁(yè)腳中水平還是垂直地組合按鈕：

實(shí)例

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到新浪微博</a>
    <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到騰訊微博</a>
    <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到 QQ 空間</a>
  </div>
</div>

親自試一試

定位頁(yè)眉和頁(yè)腳

放置頁(yè)眉和頁(yè)腳的方式有三種：

• Inline - 默認(rèn)。頁(yè)眉和頁(yè)腳與頁(yè)面內(nèi)容位于行內(nèi)。
• Fixed - 頁(yè)面和頁(yè)腳會(huì)留在頁(yè)面頂部和底部。
• Fullscreen - 與 fixed 類似;頁(yè)面和頁(yè)腳會(huì)留在頁(yè)面頂部和底部，but also over the page content. It is also slightly see-through

請(qǐng)使用 data-position 屬性來(lái)定位頁(yè)眉和頁(yè)腳：

Inline 定位（默認(rèn)）

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

親自試一試

Fixed 定位

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

親自試一試

如果需要啟用全面定位，請(qǐng)使用 data-position="fixed"，并向該元素添加 data-fullscreen 屬性：

Fullscreen 定位

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

親自試一試

提示：fullscreen 對(duì)于照片、圖像和視頻非常理想。

提示：對(duì)于 fixed 和 fullscreen 定位，觸摸屏幕將隱藏和顯示頁(yè)眉及頁(yè)腳。