# 尾部欄 ## 尾部欄結構 Footer bar structure 尾部欄除了使用的data-role的屬性與頭部欄不同之外，基本的結構與頭部欄是相同的 ``` <div data-role="footer"> 　 <h4>Footer content</h4> </div> ``` 尾部工具欄默認下應用的主題樣式為"a"(黑色)，但是你可以很輕松的設置主題樣式 **默認的尾部欄**  尾部欄的設置與頭部欄基本相同。最大的不同是，尾部欄被設定為結構盡量簡單，所以Jquery Mobile不會自動給尾部欄生成按鈕 ## 添加按鈕 Adding buttons 給尾部欄添加任何有效的按鈕標記的元素都都會生成按鈕。為了節省空間，工具欄里的按鈕都是內聯按鈕，所以按鈕的寬度只容納icon和里面的文字 默認情況下，工具欄內部容納組件與導航時是不留padding的。如果要給工具欄增加padding,請增加一個ui-bar的class. ``` <div data-role="footer" class="ui-bar"> 　 <a href="index.html" data-role="button" data-icon="delete">Remove</a> 　 <a href="index.html" data-role="button" data-icon="plus">Add</a> 　 <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> 　 <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> </div> ``` 要想把幾個按鈕打包成一個按鈕組，則需要把這些按鈕用一個容器包裹，并給該容器增加data-role="controlgroup"和data-type="horizontal"屬性 ``` <div data-role="controlgroup" data-type="horizontal"> ``` **尾部的成組按鈕**  ## 增加表單元素 Adding form elements 表單元素和其他元素也可以添加進工具欄中。這是一個把select添加到尾部欄的實例：  ## 持續的尾部欄 Persistent footers 有些情況下你需要一個尾部欄為全局導航元素，希望頁面轉場時尾部欄也固定并顯示。創造一個持續的尾部欄可以做到這一點 給尾部欄添加data-id屬性，并且在所有關聯的頁面的尾部欄設定同樣的data-id的值，就可以使尾部欄在頁面轉場時也固定并顯示， **例如**給當前頁面和目標頁面的尾部欄添加id="myfooter" 屬性，Jquery Mobile會在頁面轉場動畫的時候保持尾部欄固定 請注意：這個效果只有在頭部欄和尾部欄設定為固定的定位模式（data-position="fixed" ）時在才有用，這樣他們在頁面轉場時才不被隱藏