# 工具欄 ## 工具欄綜述 Toolbar basics 在Jquery Mobile中，有兩種標準的工具欄：**頭部欄和尾部欄** 頭部欄的作用為網站的標題，通常是移動網站頁面的第一個元素，一般包括頁面的標題文字和最多兩個按鈕 尾部欄通常是移動網站頁面的最后一個元素，在內容和作用上比頭部欄更自由一些，但一般也要包含文字和按鈕 在頭部欄或尾部欄里放置一個水平的導航欄或選項卡欄的做法是很普遍的，所以Jquery Mobile包含導航欄組件，即把無序列表ul轉化成水平的按鈕欄，使用也非常方便 ## 工具欄定位的設置 Toolbar positioning options 在頁面中設置頭部欄和尾部欄的位置定位有幾種方法。默認情況下，工具欄的定位的屬性為**"inline"**.在這種模式下，頭部欄和尾部欄通過html自動的文檔流放置，保證了他們能在所有的設備上可見，而不需要依靠css和js的定位的支持固定的定位模式可以使工具條在頁面處于固定的位置，而不需要通過js設置。工具條處于他們在頁面自然的位置上，就像inline模式一樣，但是當他被滾動出屏幕之外時，Jquery Mobile會自動通過動畫使滾動條重新出現在屏幕的頂部或底部任何時候，點擊屏幕會切換固定定位模式的工具條的顯示：當工具條消失時點擊屏幕會讓他出現，再點擊則會讓它消失。這樣用戶就有選擇在最大化瀏覽時要不要隱藏工具欄， 要給工具欄設置固定的定位模式，只需給工具欄的容器加“data-position="fixed"的屬性即可全屏的定位模式與固定的定位模式基本相同，但是當他被滾動出屏幕之外時，不會自動重新顯示，除非點擊屏幕。這對于圖片或視頻類有提升代入感的應用是非常有用的，當瀏覽時你想全屏都顯示內容，而工具欄可以通過點擊屏幕呼出。注意這種模式下工具欄會**遮住頁面內容**，所以最好用在比較特殊的場合下