jquery mobile学习笔记——navbar(导航条)

参考资料:jquery mobile API


1、页眉导航条

<div data-role='header' data-theme="t">
	<h1>广电医疗平台</h1>
	<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> 
 </div>

2、页脚导航条

<div data-role="footer" data-position="fixed">
	<div data-role="navbar">
	<ul>
		<li><a href="#" data-icon="grid">one</a></li>
		<li><a href="#" data-icon="star">two</a></li>
		<li><a href="#" data-icon="gear">three</a></li>
	</ul>
	</div>
</div>

说明:

1、使用data-role="navbar"来定义导航条,默认的,会将链接定义成按钮,无需data-role="button"

2、navbar导航条单行只5个按钮,如果超过5个,会自动分两列换行显示


定位页眉和页脚

放置页眉和页脚的方式有三种:

  • Inline - 默认。页眉和页脚与页面内容位于行内。
  • Fixed - 页面和页脚会留在页面顶部和底部。
  • Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部,but also over the page content. It is also slightly see-through

请使用 data-position 属性来定位页眉和页脚:

Inline 定位(默认)

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

Fixed 定位

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

Fullscreen 定位

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值