jQuery Mobile 工具欄

jQuery Mobile 工具欄

jQuery Mobile 工具欄

工具欄元素通常位于頭部和尾部內(nèi) - 讓導(dǎo)航易于訪問：

頭部欄

頭部欄一般包含頁面標(biāo)題/logo 或一兩個按鈕（通常是首頁、選項(xiàng)或搜索）。

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

下面的代碼，將添加一個按鈕到頭部標(biāo)題文本的左側(cè)，添加一個按鈕到頭部標(biāo)題文本的右側(cè)：

下面的代碼，將添加一個按鈕到頭部標(biāo)題文本的左側(cè)：

但是，如果您把按鈕鏈接放置在 <h1> 元素之后，將無法顯示右側(cè)的文本。要添加一個按鈕到頭部標(biāo)題的右側(cè)，請指定 class 為 "ui-btn-right"：

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

尾部欄

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

注意：尾部的樣式與頭部不同（沒有內(nèi)邊距和空間，且按鈕不居中）。為了解決這個問題，請把 "ui-btn" 放置在尾部的 class 上：

您還可以將尾部中的按鈕進(jìn)行水平或垂直組合：

定位頭部欄和尾部欄

頭部和尾部可以通過三種方式進(jìn)行定位：

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

使用 data-position 屬性來定位頭部欄和尾部欄：

要啟用全屏定位，請使用 data-position="fixed"，并添加 data-fullscreen 屬性到元素：

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

提示：固定定位和全屏定位中，通過點(diǎn)擊屏幕將隱藏和顯示頭部欄和尾部欄。