jQuery Mobile 導(dǎo)航欄
jQuery Mobile 導(dǎo)航欄
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成,通常位于頁眉或頁腳內(nèi)部。
默認地,導(dǎo)航欄中的鏈接會自動轉(zhuǎn)換為按鈕(無需 data-role="button")。
請使用 data-role="navbar" 屬性來定義導(dǎo)航欄:
實例
<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>
提示:按鈕的寬度,默認地,與其內(nèi)容一致。使用無序列表來均等地劃分按鈕:一個按鈕占據(jù) 100% 的寬度,兩個按鈕各分享 50% 的寬度,三個按鈕 33.3%,以此類推。不過,如果您在導(dǎo)航欄中規(guī)定了五個以上的按鈕,那么它會彎折為多行(參加頁面底部的“更多實例”)。
活動按鈕
當導(dǎo)航欄中的鏈接被敲擊時,會獲得選取外觀(按下)。
如需在不敲擊鏈接時實現(xiàn)此外觀,請使用 class="ui-btn-active":
實例
<li><a href="#anylink" class="ui-btn-active"
>首頁</a></li>
對于多個頁面,您也許需要為每個按鈕設(shè)置“被選”外觀,以表示用戶正在瀏覽該頁面。如果要這么做,請向鏈接添加 "ui-state-persist" 類,以及 "ui-btn-active" 類:
實例
<li><a href="#anylink" class="ui-btn-active ui-state-persist"
>首頁</a></li>
更多實例
- 內(nèi)容中的導(dǎo)航欄
- 如何在 data-role="content" 中添加導(dǎo)航欄。
- 頁腳中的導(dǎo)航欄
- 如何在頁腳中添加導(dǎo)航欄。
- 在導(dǎo)航欄中定位圖標
- 如何在頁腳內(nèi)部的導(dǎo)航欄中放置圖標。
- 五個以上的按鈕
- 演示在導(dǎo)航欄中的十個按鈕。
posted on 2014-05-19 23:00 順其自然EVO 閱讀(297) 評論(0) 編輯 收藏 所屬分類: jQuery Mobile 教程