导航栏 data-role=navbar

在一个典型的页眉或页脚,jQuery Mobile提供了一个非常基本的导航栏控件,它有5个按钮以及可选的图标。是一个持续不变的导航栏,它更像一个标签栏,你浏览过的页面保持固定。

导航栏是一个容器(div),内包含一个链接的无序列表(ul)。容器有一个 data-role="navbar" 属性。

<div data-role="navbar">  
	<ul> 
		<li><a href="60.html">One</a></li> 
		<li><a href="61.html">Two</a></li> 
	</ul> 
</div> <!-- /navbar --> 

在导航栏的链接,当被点击时,它变成激活(选中的)状态。在导航栏中,所有锚点变成激活状态的时候,CSS类 ui-btn-active 第一个被删除。如果这是一个链接到另一个页面,在转场后,该类再被删除。

在导航栏上的初始化时候,设置一个链接为激活状态,给它添加 class="ui-btn-active" 即可。另外添加一个CSS类 ui-state-persist 使框架恢复激活状态,每次打开页面的时候,它都会显示存在DOM中的页面。(不论你导航到哪个子页面,导航栏持久一直都在固定的位置;即使切换了页面。)

<div data-role="navbar">
	<ul>
		<li><a href="a.html" class="ui-btn-active ui-state-persist">One</a></li>
		<li><a href="b.html">Two</a></li>
	</ul>
</div><!-- /navbar -->

导航栏内每项的宽度都被设定为相同的,所以n个按钮的宽度为浏览器宽度1/n,但这是在5项以内的情况。如果导航栏多于5项,导航栏将自动表现为多行,即换行显示。1项navbars将呈现为100%。

头部栏中的导航条

如果要给页面头部增加一个导航栏,你也可以保留头部栏的页面标题和按钮。只需要把导航栏容器放进头部栏容器内。

<div data-role="header"> 
		<h1>I'm a header</h1> 
		<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a> 
				
		<div data-role="navbar"> 
			<ul> 
				<li><a href="#">One</a></li> 
				<li><a href="#">Two</a></li> 
				<li><a href="#">Three</a></li> 
			</ul> 
		</div><!-- /navbar --> 
</div><!-- /header --> 

底部栏中的导航条

如果你想添加一个导航栏页面的底部,让它更像一个标签栏,只需把导航栏的容器放进底部栏容器内。

<div data-role="footer"> 
		<div data-role="navbar"> 
			<ul> 
				<li><a href="#">One</a></li> 
				<li><a href="#">Two</a></li> 
				<li><a href="#">Three</a></li> 
			</ul> 
		</div><!-- /navbar --> 
</div><!-- /footer --> 

导航栏图标 data-icon

给导航栏的列表项链接增加 data-icon 属性,可以给链接设置一个标准的移动网站的图标。给列表项链接增加 data-iconpos="top" 属性,可以给链接的图标设置位置为在文字上方。

     	<div data-role="footer"> 
    		<div data-role="navbar"> 
    			<ul>
    				<li><a href="#" data-icon="grid">Summary</a></li>
    				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
    				<li><a href="#" data-icon="gear">Setup</a></li>
    			</ul>
    		</div><!-- /navbar --> 
    	</div><!-- /footer --> 

定位导航栏按钮图标 data-iconpos

定位导航栏按钮图标。取值:left, right, top, bottom, none, notext(仅显示图标)。默认值:top。

    	<div data-role="footer">
    		<div data-role="navbar" data-iconpos="bottom"> 
    			<ul>
    				<li><a href="#" data-icon="grid">Summary</a></li>
    				<li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
    				<li><a href="#" data-icon="gear">Setup</a></li>
    			</ul>
    		</div><!-- /navbar -->
    	</div><!-- /footer -->

使用第三方图标集

您可以添加任何流行的图标库如 Glyphish 来实现IOS的风格的大图标标签,所有这一切只需要你添加相应的样式即可。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
    .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
    .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
    #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
    #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
    #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
    #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
    #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:90px; min-height:90px;">
	<div data-role="content" > 
    	<div data-role="footer" class="nav-glyphish-example">
    		<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    		<ul>
    			<li><a href="#" id=""chat" data-icon="custom">Chat</a></li>
    			<li><a href="#" id=""email" data-icon="custom">Email</a></li>
    			<li><a href="#" id=""skull" data-icon="custom">Danger</a></li>
    			<li><a href="#" id=""beer" data-icon="custom">Beer</a></li>
    			<li><a href="#" id=""coffee" data-icon="custom">Coffee</a></li>
    		</ul>
    		</div>
    	</div>
	</div>
</div>
</body>
</html>

导航条主题样式 data-theme

导航条继承其父容器的主题样本,就像按钮。如果一个导航栏放在页眉或页脚工具栏,它将继承工具栏样式,除非你设置这个标记。

     	<div data-role="footer">
    		<div data-role="navbar">
    			<ul>
    				<li><a href="#" data-icon="grid" data-theme="a">A</a></li>
    				<li><a href="#" data-icon="star" data-theme="b">B</a></li>
    				<li><a href="#" data-icon="gear" data-theme="c">C</a></li>
    				<li><a href="#" data-icon="arrow-l" data-theme="d">D</a></li>
    				<li><a href="#" data-icon="arrow-r" data-theme="e">E</a></li>
    			</ul>
    		</div><!-- /navbar -->
    	</div><!-- /footer -->

下面例子,也是继承父容器的主题样式。请注意,在这些例子中,而不是使用一个 data-theme 属性,我们手动添加CSS类 ui-body-a 和CSS类 ui-body ,但继承的工作方式是一样的。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:90px; min-height:90px;">
	<div data-role="content" > 
    	<div class="ui-body-a ui-body">
    		<h3>Swatch "a"</h3>
    		<div data-role="navbar">
    			<ul>
    				<li><a href="#" data-icon="grid">A</a></li>
    				<li><a href="#" data-icon="star">B</a></li>
    				<li><a href="#" data-icon="gear">C</a></li>
    				<li><a href="#" data-icon="arrow-l">D</a></li>
    				<li><a href="#" data-icon="arrow-r">E</a></li>
    			</ul>
    		</div><!-- /navbar --> 
    	</div><!-- /container --> 
    	<div class="ui-body-d ui-body">
    		<h3>Swatch "b"</h3>
    		<div data-role="navbar">
    			<ul>
    				<li><a href="#" data-icon="grid">A</a></li>
    				<li><a href="#" data-icon="star">B</a></li>
    				<li><a href="#" data-icon="gear">C</a></li>
    				<li><a href="#" data-icon="arrow-l">D</a></li>
    				<li><a href="#" data-icon="arrow-r">E</a></li>
    			</ul>
    		</div><!-- /navbar --> 
    	</div><!-- /container --> 
	</div>
</div>
</body>
</html>