導覽列是由一組水平排列的連結組成，通常包含在頭部或尾部內。
預設情況下，導覽列中的連結將自動變成按鈕（不需要 data-role="button"）。
使用data-role="navbar" 屬性來定義導覽列：
#實例
<!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>我的内容..</p>
</div>
<div data-role="footer">
<h1>我的底部</h1>
</div>
</div>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
 | #預設情況下，按鈕的寬度與它的內容一樣。使用一個無序列表來平均劃分按鈕的寬度：1 個按鈕佔 100% 寬度，2 個按鈕則各佔 50% 的寬度，3 個按鈕則每個佔 33,3% 的寬度，依此類推。然而，如果您在導覽列中指定了超過 5 個按鈕，將會拆成多行（查看"更多實例"）。
|
|---|
導航按鈕圖示
我們可以使用data-icon 屬性為導航按鈕新增圖示:
實例
<!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>我的内容..</p>
</div>
<div data-role="footer">
<h1>我的底部</h1>
</div>
</div>
</body>
</html>
點擊"運行實例"按鈕查看線上實例
data-icon 屬性與圖示章節中的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" 類別一樣(圖示章節有詳細說明), 你可以設定圖示顯示的位置： top（頭部）, right（右側）, bottom（底部） 或left（左側）。
圖示位置在導覽列容器上設置，使用data-iconpos 屬性來指定位置：
##屬性值| | 描述 | 實例 |
data-iconpos="top" | 圖示頂部對齊##嘗試 | |
#data-iconpos="right"| 圖示右側對齊 | #嘗試 | | ##data-iconpos= "bottom"
圖示底部對齊 | 嘗試一下 | | data-iconpos="left"
圖示左側對齊 | 試試看 | |
# 預設情況，導航按鈕的圖示位於文字上方(data -iconpos="top")。 | |
啟動按鈕
當導覽列中的某個連結被點擊，它將獲得被選中（按下）的外觀。
如果想在不點擊連結時獲得這種外觀，請使用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>本例设有 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>本页中没有被预选的按钮（突出显示）。</p>
<p>如需让按钮被选的外观表示当前正在访问页面，请返回导航栏教程，继续向下阅读。</p>
</div>
<div data-role="footer">
<h1>我的页脚</h1>
</div>
</div>
</body>
</html>
點擊"運行實例" 按鈕查看線上實例
#對於多個頁面，您可能想要每個按鈕的選取外觀代表目前使用者所在的頁面。要做到這一點，請新增"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>本例设有 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="#" 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>如果返回首页，您会发现页面将保持状态，归功于 ui-state-persist 类。</p>
</div>
<div data-role="footer">
<h1>我的页脚</h1>
</div>
</div>
</body>
</html>
運行實例»
點擊"運行實例"按鈕查看線上實例
# 更多實例
內容中的導覽列
實例
<!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>该例演示内容中的导航栏。</p>
</div>
<div data-role="footer">
<h1>我的页脚</h1>
</div>
</div>
</body>
</html>
#執行實例»
如何在data-role="content" 內新增導覽列。
尾部中的導覽列
實例
<!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>该例演示页脚中的导航栏。</p>
</div>
<div data-role="footer">
<h1>我的页脚</h1>
</div>
</div>
</body>
</html>
運行實例»
如何在尾部內新增導覽列。
導覽列中的定位圖示
實例
<!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>该例演示页脚中的导航栏中的图标定位。</p>
<p>data-iconpos="left" 将把图标定位到按钮的左侧。</p>
</div>
<div data-role="footer">
<h1>我的底部</h1>
</div>
</div>
</body>
</html>
執行實例»
如何在尾部內的導覽列中定位圖示。
超過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>该例演示当导航栏包含超过五个按钮时的情况。</p>
</div>
<div data-role="footer">
<h1>我的底部</h1>
</div>
</div>
</body>
</html>
運行實例»
##點擊"運行實例"按鈕查看線上實例
