# 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> ``` 但是，如果您把按鈕鏈接放置在 &lt;h1&gt; 元素之后，將無法顯示右側的文本。要添加一個按鈕到頭部標題的右側，請指定 class 為 "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">在 Facebook上關注我</a> <a href="#" data-role="button">在Twitter上關注我</a> <a href="#" data-role="button">在Instagram上關注我</a> </div> ``` **注意：**尾部的樣式與頭部不同（沒有內邊距和空間，且按鈕不居中）。為了解決這個問題，請把 "ui-btn" 放置在尾部的 class 上： ## 實例 ``` <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">在Facebook上關注我</a> <a href="#" data-role="button" data-icon="plus">在Twitter上關注我</a> <a href="#" data-role="button" data-icon="plus">在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> ``` **提示：**全屏定位適用于照片、圖像和視頻。 **提示：**固定定位和全屏定位中，通過點擊屏幕將隱藏和顯示頭部欄和尾部欄。