Latest web development tutorials

jQuery Mobile 工具欄

工具欄元素通常位於頭部和尾部內- 讓導航易於訪問:



頭部欄

頭部欄一般包含頁面標題/logo 或一兩個按鈕(通常是首頁、選項或搜索)。

您可以添加按鈕到頭部的左側或右側。

下面的代碼,將添加一個按鈕到頭部標題文本的左側,添加一個按鈕到頭部標題文本的右側:

實例

<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主頁</a>
<h1>歡迎訪問我的主頁</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>

嘗試一下»

下面的代碼,將添加一個按鈕到頭部標題文本的左側:

實例

<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主頁</a>
<h1>歡迎訪問我的主頁</h1>
</div>

嘗試一下»

但是,如果您把按鈕鏈接放置在<h1> 元素之後,將無法顯示右側的文本。 要添加一個按鈕到頭部標題的右側,請指定class 為"ui-btn-right":

實例

<div data-role="header">
<h1>歡迎訪問我的主頁</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">搜索</a>
</div>

嘗試一下»

lamp 頭部可以包含一個或兩個按鈕,而尾部沒有限制。


尾部欄

尾部欄比頭部欄更靈活- 在整個頁面中它們更具功能性和可變性,因此可以包含盡可能多的按鈕:

實例

<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上關注我</a>
</div>

嘗試一下»

注意:尾部的樣式與頭部不同(沒有內邊距和空間,且按鈕不居中)。 我們可以使用簡單的樣式來解決這個問題:

實例

<div data-role="footer" style="text-align:center;">

嘗試一下»

您還可以將尾部中的按鈕進行水平或垂直組合:

實例

<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizo​​ntal" >
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上關注我</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上關注我</a>
</div>
</div>

嘗試一下»

定位頭部欄和尾部欄

頭部和尾部可以通過三種方式進行定位:

  • Inline - 默認。 頭部欄和尾部欄與頁面內容內聯。
  • Fixed - 頭部欄和尾部欄固定在頁面的頂部和底部。
  • Fullscreen - 與Fixed 定位模式基本相同,頭部欄和尾部欄固定在頁面的頂部和底部。 但是當他工具欄滾動出屏幕之外時,不會自動重新顯示,除非點擊屏幕,這對於圖片或視頻類有提升代入感的應用是非常有用的。 注意這種模式下工具欄會遮住頁面內容,所以最好用在比較特殊的場合下。

使用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>

嘗試一下»

提示:全屏定位適用於照片、圖像和視頻。

提示:固定定位和全屏定位中,通過點擊屏幕將隱藏和顯示頭部欄和尾部欄。


實例

更多實例

在工具欄上只顯示圖標
在工具欄上只顯示圖標可以使用ui-btn-icon-notext 類。