jquery mobile 中的导航条

最新推荐文章于 2022-11-03 20:08:37 发布

请訆涐尐坤

最新推荐文章于 2022-11-03 20:08:37 发布

阅读量1.3k

点赞数

分类专栏： jqueryMoblie使用总结

本文链接：https://blog.csdn.net/u014209975/article/details/43794465

版权

jqueryMoblie使用总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在一个典型的页眉页脚，jquery mobile提供了一个非常有效基本的导航栏控件,它有5个按钮以及它的图标，是一个持续不变的导航栏，它更像一个标签栏，你浏览过页面保持不变

导航条是一个容器(div)，内包含一个链接的无序列表(ul)，容器有一个data-role=”navbar“属性

<ul>

<ul>

</div>

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

在导航条初始化时候，设置一个链接为激活状态，给它添加class=“ui-btn-active”即可，另外添加一个css类ui-state-persiat使框架恢复激活状态，每次打开页面的时候，它都会显示存在的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 --> 

 导航栏图标 data-icon
给导航栏的列表项链接添加data-icon属性，可以给链接设置一个标准的移动网站图标，给列表项链接添加data-iconpos="top"属性，可以给链接图标设置在
文字上方	<div data-role="footer"> 
    		<div data-role="navbar" data-iconpos="top">
    			<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>

 您可以添加任何流行的图标库如 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>




  更多信息http://www.lampweb.org/jquerymobile/17/59.html

请訆涐尐坤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile 中的导航条

在一个典型的页眉页脚，jquery mobile提供了一个非常有效基本的导航栏控件,它有5个按钮以及它的图标，是一个持续不变的导航栏，它更像一个标签栏，你浏览过页面保持不变导航条是一个容器(div)，内包含一个链接的无序列表(ul)，容器有一个data-role=”navbar“属性
复制链接

扫一扫