導覽列 (Navigation Bar) 可顯示數個方塊狀的導覽按鈕，以做為導覽之用。jQuery Mobile以<div data-role="navbar">標籤處理導覽列，例如以下範例將導覽列置於內文部份，其中class="ui-btn-active"代表預設按鈕：
【執行結果】
欲恢復頁面的預設按鈕狀態，可加入ui-state-persist標籤，例如：
若導覽按鈕超過五個時，將以並排的方式呈現：
【執行結果】
欲將導覽列置於頁首部份，只需將<div data-role="navbar">標籤置於<div data-role="header">部份則完成，例如：
【執行結果】
以此類推，欲將導覽列置於頁尾部份，只需將<div data-role="navbar">標籤置於<div data-role="footer">部份則完成，例如：
此外，亦可加入預設圖示，但data-iconpos="notext"屬性並沒作用，仍會顯示文字：
【執行結果】
而圖示的位置分別由以下data-iconpos屬性設定，data-iconpos屬性需置於<div data-role="navbar">標籤之中：
| 屬性 |
說明 |
| data-iconpos="top" |
圖示位於文字的上方 |
| data-iconpos="bottom" |
圖示位於文字的下方 |
| data-iconpos="left" |
圖示位於文字的左方 |
| data-iconpos="right" |
圖示位於文字的右方 |
例如將圖示位於文字的左方：
【執行結果】
【參考資料】
[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com
© Chia-Hui Huang
沒有留言:
張貼留言