jQuery Mobile 工具欄

jQuery Mobile 工具欄

工具欄元素常被放置於頁眉和頁腳中 - 以實現「已訪問」的導航：

標題欄

頁眉一般會包含頁眉標題/LOGO 或一到兩個按鈕（一般是首頁、選項或搜索按鈕）。

您能夠在頁眉中向左側或/以及右側添加按鈕。

下面的代碼，將向頁眉標題文本的左側添加一個按鈕，並向右側添加一個按鈕：

實例:

<div data-role="header">

  <a href="#" data-role="button">首頁</a>

  <h1>歡迎來到個人主頁</h1>

  <a href="#" data-role="button">搜索</a>

</div>

　　

下面的代碼將向頁眉標題的左側添加一個按鈕：

<div data-role="header">

  <a href="#" data-role="button">首頁</a>

  <h1>歡迎來到個人主頁</h1>

</div>

　　

不過，若是您在 <h1> 元素以後放置按鈕連接，那麼它不會顯示在文本右側。如需向頁眉標題的右側添加按鈕，請規定類名 "ui-btn-right"：

實例:

<div data-role="header">

  <h1>歡迎來到個人主頁</h1>

  <a href="#" data-role="button" >搜索</a>class="ui-btn-right"

</div>

　　

提示：頁眉可包含一個或兩個按鈕，然而頁腳沒有限制。

頁腳欄

與頁眉相比，頁腳更具伸縮性 - 它們更實用且多變，因此可以包含所需數量的按鈕：

實例:

<div data-role="footer">

  <a href="#" data-role="button">轉播到新浪微博</a>

  <a href="#" data-role="button">轉播到騰訊微博</a>

  <a href="#" data-role="button">轉播到 QQ 空間</a>

</div>

　　

註釋：頁腳與頁眉的樣式不一樣（它會減去一些內邊距和空白，而且按鈕不會居中）。若是要修正該問題，請在頁腳設置類名 "ui-btn"：

實例:

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

　　

您也可以選擇在頁腳中水平仍是垂直地組合按鈕：

實例:

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

  <div data-role="controlgroup" data-type="horizontal">

    <a href="#" data-role="button" data-icon="plus">轉播到新浪微博</a>

    <a href="#" data-role="button" data-icon="plus">轉播到騰訊微博</a>

    <a href="#" data-role="button" data-icon="plus">轉播到 QQ 空間</a>

  </div>

</div>

　

定位頁眉和頁腳

放置頁眉和頁腳的方式有三種：

• Inline - 默認。頁眉和頁腳與頁面內容位於行內。
• Fixed - 頁面和頁腳會留在頁面頂部和底部。
• Fullscreen - 與 fixed 相似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through

請使用 data-position 屬性來定位頁眉和頁腳：

Inline 定位（默認）

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

　　

固定定位

Fixed 定位

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

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

浮動定位（浮動在上下兩端）

若是須要啓用全面定位，請使用 data-position="fixed"，並向該元素添加 data-fullscreen 屬性：

　

Fullscreen 定位

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

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

　

浮動並透明

提示：fullscreen 對於照片、圖像和視頻很是理想。

提示：對於 fixed 和 fullscreen 定位，觸摸屏幕將隱藏和顯示頁眉及頁腳。