The navigation bar is composed of a set of horizontally arranged links, usually included in the header or footer.
By default, links in the navigation bar will automatically become buttons (data-role="button" is not required).
Use the data-role="navbar" attribute to define the navigation bar:
Example
<!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>
Click the "Run Instance" button to view the online instance
 | By default, the width of the button is the same as its The content is the same. Use an unordered list to divide the width of the buttons evenly: 1 button takes 100% of the width, 2 buttons take 50% of the width each, 3 buttons take 33,3% of the width each, and so on. However, if you specify more than 5 buttons in the navigation bar, it will be split into multiple rows (see "More Examples").
|
|---|
Navigation button icon
We can use the data-icon attribute to add an icon to the navigation button:
Instance
<!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>
Click the "Run instance" button to view the online instance
data-icon attribute Use the same values as for the CSS class in the icons chapter. CSS class usage class="ui-icon-value",
The data-icon attribute uses the method data-icon="value".
|
|
|
##Attribute value | Description | Icon |
data-icon="home" | Homepage |  |
data-icon="arrow-r" | Right arrow |  |
data -icon="search" | Search |  |
For a complete reference manual of all jQuery Mobile button icons, visit our jQuery Mobile Icons Reference Manual.
Position icon
Just like the "ui-btn-icon-position" class (detailed description in the icon chapter), you can set the icon display Position: top, right, bottom or left.
The icon position is set on the navigation bar container, use the data-iconpos attribute to specify the position:
| Attribute value | Description | Example |
|---|
| data-iconpos="top" | Icon top alignment | Try it out |
| data-iconpos="right" | Align the icon to the right | Try it |
| data-iconpos= "bottom" | Align bottom of icon | Try it |
##data-iconpos="left" | Align icon to left | Try it |
| ## By default, the icon of the navigation button is located above the text (data -iconpos="top"). | |
|---|
Activate Button
When a link in the navigation bar is clicked, it will gain the appearance of being selected (pressed).
If you want to get this look when the link is not clicked, use class="ui-btn-active":
Example
<!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>
Click the "Run Instance" button to view the online instance
For multiple pages, you may want the selected appearance of each button to represent the current The page the user is on. To do this, add "ui-state-persist" and "ui-btn-active" to the linked class:
Instance
<!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>
Click the "Run instance" button to view online instances
More instances
Navigation bar in content
Instance
<!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>
Click the "Run instance" button to view online Example
How to add a navigation bar within data-role="content".
Navigation bar in the tail
Instance
<!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>
Click "Run instance " button to view online examples
How to add a navigation bar within the tail.
Location icon in the navigation bar
Instance
<!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>
Click "Run" Example" button to view online examples
How to position the icon in the navigation bar within the tail.
More than 5 buttons
Instance
<!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>
Click "Run Instance" Button View Online Example
Demo of 10 buttons in the navigation bar.
