導(dǎo)航欄是由一組水平排列的鏈接組成，通常包含在頭部或尾部內(nèi)。
默認情況下，導(dǎo)航欄中的鏈接將自動變成按鈕（不需要 data-role="button"）。
使用 data-role="navbar" 屬性來定義導(dǎo)航欄：
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎訪問我的主頁</h1> <div data-role="navbar"> <ul> <li><a href="#">主頁</a></li> <li><a href="#">第二頁</a></li> <li><a href="#">搜索</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>我的內(nèi)容..</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
 | 默認情況下，按鈕的寬度與它的內(nèi)容一樣。使用一個無序列表來平均地劃分按鈕的寬度：1 個按鈕占 100% 寬度，2 個按鈕則各占 50% 的寬度，3 個按鈕則每個占 33,3% 的寬度，依此類推。然而，如果您在導(dǎo)航欄中指定了超過 5 個按鈕，將會拆成多行（查看"更多實例"）。 |
|---|
導(dǎo)航按鈕圖標
我們可以使用 data-icon 屬性為導(dǎo)航按鈕添加圖標:
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎訪問我的主頁</h1> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home">主頁</a></li> <li><a href="#" data-icon="arrow-r">第二頁</a></li> <li><a href="#" data-icon="search">搜索</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>我的內(nèi)容..</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
data-icon 屬性與在圖標章節(jié)中的 CSS 類使用相同的值。CSS 類使用方法 class="ui-icon-value", data-icon 屬性使用方法 data-icon="value"。
| 屬性值 | 描述 | 圖標 |
|---|---|---|
| data-icon="home" | 首頁 |  |
| data-icon="arrow-r" | 右邊箭頭 |  |
| data-icon="search" | 搜索 |  |
如需查看所有 jQuery Mobile 按鈕圖標的完整參考手冊，請訪問我們的 jQuery Mobile 圖標參考手冊。
定位圖標
就像 "ui-btn-icon-position" 類一樣 (圖標章節(jié)有詳細說明), 你可以設(shè)置圖標顯示的位置： top（頭部）, right（右側(cè)）, bottom（底部） 或 left（左側(cè)）。
圖標位置在導(dǎo)航欄容器上設(shè)置，使用 data-iconpos 屬性來指定位置：
| 屬性值 | 描述 | 實例 |
|---|---|---|
| data-iconpos="top" | 圖標頂部對齊 | 嘗試一下 |
| data-iconpos="right" | 圖標右側(cè)對齊 | 嘗試一下 |
| data-iconpos="bottom" | 圖標底部對齊 | 嘗試一下 |
| data-iconpos="left" | 圖標左側(cè)對齊 | 嘗試一下 |
| 默認情況， 導(dǎo)航按鈕的圖標位于文本之上 (data-iconpos="top")。 |
激活按鈕
當導(dǎo)航欄中的某個鏈接被點擊，它將獲得被選中（按下）的外觀。
如果想在不點擊鏈接時獲得這種外觀，請使用 class="ui-btn-active"：
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎訪問我的主頁</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="home">首頁</a></li> <li><a href="#pagetwo" data-icon="arrow-r">頁面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>本例設(shè)有 ui-btn-active 類，請注意首頁按鈕時突出顯示的（已選）。</p> <p>如果點擊頁面二，您會注意到按鈕不會突出顯示。</p> </div> <div data-role="footer"> <h1>我的頁腳</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>歡迎訪問我的主頁</h1> <div data-role="navbar"> <ul> <li><a href="#pageone" data-icon="home">首頁</a></li> <li><a href="#" data-icon="arrow-r">頁面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>本頁中沒有被預(yù)選的按鈕（突出顯示）。</p> <p>如需讓按鈕被選的外觀表示當前正在訪問頁面，請返回導(dǎo)航欄教程，繼續(xù)向下閱讀。</p> </div> <div data-role="footer"> <h1>我的頁腳</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
對于多個頁面，您可能想要每個按鈕的選中外觀代表當前用戶所在的頁面。要做到這一點，請?zhí)砑?"ui-state-persist" 和 "ui-btn-active" 到鏈接的 class：
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎來到我的主頁</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首頁</a></li> <li><a href="#pagetwo" data-icon="arrow-r">頁面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>本例設(shè)有 ui-btn-active 類，請注意首頁按鈕時突出顯示的（已選）。</p> <p>請點擊頁面二按鈕，看看會發(fā)生什么。</p> </div> <div data-role="footer"> <h1>我的頁腳</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>歡迎來到我的主頁</h1> <div data-role="navbar"> <ul> <li><a href="#pageone" data-icon="home">首頁</a></li> <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">頁面二</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>該頁面的按鈕也會被突出顯示，歸功于 ui-btn-active 類。</p> <p>如果返回首頁，您會發(fā)現(xiàn)頁面將保持狀態(tài)，歸功于 ui-state-persist 類。</p> </div> <div data-role="footer"> <h1>我的頁腳</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
更多實例
內(nèi)容中的導(dǎo)航欄
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎來到我的主頁</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">刪除</a></li> <li><a href="#" data-icon="check">喜愛</a></li> <li><a href="#" data-icon="info">信息</a></li> </ul> </div> <p>該例演示內(nèi)容中的導(dǎo)航欄。</p> </div> <div data-role="footer"> <h1>我的頁腳</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
如何在 data-role="content" 內(nèi)添加導(dǎo)航欄。
尾部中的導(dǎo)航欄
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎來到我的主頁</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">刪除</a></li> <li><a href="#" data-icon="check">喜愛</a></li> <li><a href="#" data-icon="info">信息</a></li> </ul> </div> <p>該例演示頁腳中的導(dǎo)航欄。</p> </div> <div data-role="footer"> <h1>我的頁腳</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
如何在尾部內(nèi)添加導(dǎo)航欄。
導(dǎo)航欄中的定位圖標
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎來到我的主頁</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar" data-iconpos="left"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">刪除</a></li> <li><a href="#" data-icon="check">喜愛</a></li> <li><a href="#" data-icon="info">信息</a></li> </ul> </div> <p>該例演示頁腳中的導(dǎo)航欄中的圖標定位。</p> <p>data-iconpos="left" 將把圖標定位到按鈕的左側(cè)。</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
如何在尾部內(nèi)的導(dǎo)航欄中定位圖標。
超過 5 個按鈕
實例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>歡迎來到我的首頁</h1> </div> <div data-role="main" class="ui-content"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="plus">更多</a></li> <li><a href="#" data-icon="minus">更少</a></li> <li><a href="#" data-icon="delete">刪除</a></li> <li><a href="#" data-icon="check">喜愛</a></li> <li><a href="#" data-icon="info">信息</a></li> <li><a href="#" data-icon="forward">向前</a></li> <li><a href="#" data-icon="back">向后</a></li> <li><a href="#" data-icon="star">星形</a></li> <li><a href="#" data-icon="gear">選項</a></li> <li><a href="#" data-icon="search">搜索</a></li> </ul> </div> <p>該例演示當導(dǎo)航欄包含超過五個按鈕時的情況。</p> </div> <div data-role="footer"> <h1>我的底部</h1> </div> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
導(dǎo)航欄中 10 個按鈕的演示。