VeryOK建站教程

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" class="ui-btn-right">搜索</a>
</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" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

親自試一試

如果需要啟用全面定位,請使用 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 對于照片、圖像和視頻非常理想。

提示:對于 fixed 和 fullscreen 定位,觸摸屏幕將隱藏和顯示頁眉及頁腳。

江西时时彩交易时间