jQuery Mobile 導航欄
- 上一頁 jQuery Mobile 工具欄
- 下一頁 jQuery Mobile 可折疊
jQuery Mobile 導航欄
導航欄由一組水平排列的鏈接構成,通常位于頁眉或頁腳內部。
默認地,導航欄中的鏈接會自動轉換為按鈕(無需 data-role="button")。
請使用 data-role="navbar" 屬性來定義導航欄:
實例
<div data-role="header">
<div data-role="navbar"
>
<ul>
<li><a href="#anylink">首頁</a></li>
<li><a href="#anylink">頁面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
提示:按鈕的寬度,默認地,與其內容一致。使用無序列表來均等地劃分按鈕:一個按鈕占據 100% 的寬度,兩個按鈕各分享 50% 的寬度,三個按鈕 33.3%,以此類推。不過,如果您在導航欄中規定了五個以上的按鈕,那么它會彎折為多行(參加頁面底部的“更多實例”)。
活動按鈕
當導航欄中的鏈接被敲擊時,會獲得選取外觀(按下)。
如需在不敲擊鏈接時實現此外觀,請使用 class="ui-btn-active":
實例
<li><a href="#anylink" class="ui-btn-active"
>首頁</a></li>
對于多個頁面,您也許需要為每個按鈕設置“被選”外觀,以表示用戶正在瀏覽該頁面。如果要這么做,請向鏈接添加 "ui-state-persist" 類,以及 "ui-btn-active" 類:
實例
<li><a href="#anylink" class="ui-btn-active ui-state-persist"
>首頁</a></li>
更多實例
- 上一頁 jQuery Mobile 工具欄
- 下一頁 jQuery Mobile 可折疊