jQuery Mobile 導(dǎo)航欄代碼
更新時(shí)間：2013年11月01日 15:52:39 作者：
jQuery Mobile 導(dǎo)航欄代碼
導(dǎo)航欄是由一組水平排列的鏈接組成，通常包含在頭部或尾部?jī)?nèi)。
默認(rèn)情況下，導(dǎo)航欄中的鏈接將自動(dòng)變成按鈕（不需要 data-role="button"）。
使用 data-role="navbar" 屬性來(lái)定義導(dǎo)航欄：
復(fù)制代碼 代碼如下:
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
默認(rèn)情況下，按鈕的寬度與它的內(nèi)容一樣。使用一個(gè)無(wú)序列表來(lái)平均地劃分按鈕的寬度：1 個(gè)按鈕占 100% 寬度，2 個(gè)按鈕則各占 50% 的寬度，3 個(gè)按鈕則每個(gè)占 33,3% 的寬度，依此類(lèi)推。然而，如果您在導(dǎo)航欄中指定了超過(guò) 5 個(gè)按鈕，將會(huì)拆成多行（查看"更多實(shí)例"）。
激活按鈕
當(dāng)導(dǎo)航欄中的某個(gè)鏈接被點(diǎn)擊，它將獲得被選中（按下）的外觀。
如果想在不惦記鏈接時(shí)獲得這種外觀，請(qǐng)使用 class="ui-btn-active"：
<li><a href="#anylink" class="ui-btn-active">Home</a></li>
對(duì)于多個(gè)頁(yè)面，您可能想要每個(gè)按鈕的選中外觀代表當(dāng)前用戶所在的頁(yè)面。要做到這一點(diǎn)，請(qǐng)?zhí)砑?"ui-state-persist" 和 "ui-btn-active" 到鏈接的 class：
<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>
您可能感興趣的文章:
- 簡(jiǎn)單的jquery左側(cè)導(dǎo)航欄和頁(yè)面選中效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- 用jquery的方法制作一個(gè)簡(jiǎn)單的導(dǎo)航欄
- Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
- jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
- jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開(kāi)列表內(nèi)容的導(dǎo)航欄效果
- jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
- jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)垂直和水平菜單導(dǎo)航欄
- jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果
相關(guān)文章
基于jquery的讓textarea自適應(yīng)高度的插件
jquery extension - auto height text area2010-08-08
在本篇文章里小編給大家整理了一篇關(guān)于jquery對(duì)元素的基本操作實(shí)例分析內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。2022-01-01
今天小朋友寫(xiě)了個(gè)程式，出現(xiàn)亂碼，將解決過(guò)程分享一下 為方便說(shuō)明，將環(huán)境簡(jiǎn)化，vs.net 2003, jquery-1.3.2.js, web service調(diào)用2010-02-02
這篇文章主要介紹了jquery操作 iframe的方法,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery validate驗(yàn)證插件用法，Validate是基于jQuery的一款輕量級(jí)驗(yàn)證插件，支持input,select,textarea的驗(yàn)證，感興趣的小伙伴們可以參考一下2016-05-05
基于jquery+thickbox仿校內(nèi)登錄注冊(cè)框
近日，客戶說(shuō)他想要個(gè)類(lèi)似于人人網(wǎng)（以前為校內(nèi)）的登錄框效果，于是上網(wǎng)搜了下，發(fā)現(xiàn)有一個(gè)仿得比較好的，于是就拿過(guò)來(lái)用了用。2010-06-06
jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
前端時(shí)間寫(xiě)項(xiàng)目用到了ajaxForm這個(gè)插件，可以用它提交表單和上傳圖片，聽(tīng)起來(lái)和正常的form表單提交沒(méi)什么區(qū)別，只不過(guò)是ajax提交，無(wú)需刷新頁(yè)面,下面通過(guò)實(shí)例給大家介紹jQuery表單插件ajaxForm，需要的朋友參考下吧2017-01-01
jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)驗(yàn)證郵箱格式的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery層級(jí)選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02