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>


xq_navbar 简单实现依赖于jQuery自定义快捷的炫酷导航条效果,样式效果完全自定义。^_^ 来一起感受它的魅力吧! 1.技术点 两个个鼠标事件: onmouseover:鼠标移到指定对象上时触发; onmouseout:鼠标离开指定时触发; 2.先来看看它的执行效果吧。(请用电脑) https://topqiang.github.io/xq_navbar/ 3.迫不及待想试一试了。 < link rel="stylesheet" href="css/xq_navbar.css"/> < link rel="stylesheet" href="css/xq.css"/>//不采用beat动画 ,可以不引入 然后在body尾部引入 < script src="js/jquery.min.js" type="text/javascript"> < script src="js/xq_navbar.js" type="text/javascript"> <div class="xq_bag" id="bar5">//可以自定义其大小 <ul class="xq_navbar"> <li class="xq_navli"><a href="#">java</a></li> <li class="xq_navli"><a href="#">php</a></li> <li class="xq_navli"><a href="#">c#</a></li> <li class="xq_navli"><a href="#">photoshop</a></li> <li class="xq_navli"><a href="#">c++</a></li> <li class="xq_navli"><a href="#">html</a></li> <li class="xq_navli"><a href="#">javascript</a></li> </ul> </div> 4.那么配置参数都有那些呢? var defaults = { "bgcolor" : "#38927a", //导航条颜色 "type" : "line", //定义导航类型 下划线 underline 上划线overline 双划线line 块级背景block "liwidth" : "avg", //设置导航项的宽度类型 auto:自动 , avg:评分, 30:指定具体宽度 "hcolor" : "rgba(255,0,0,0.8)"//指定每一个导航项的颜色。不指定或指定不够默认 #ccc;统一颜色可直接传入颜色值.也可以["blue","rgb(10,100,100)","red","pink","green","rgba(23,234,22,1)","rgb(230,230,230)"] } 5.怎么启动呢? 页面加载完成后即可调用该插件,传入你想要效果的参数 $("#bar5").xq_navbar({ "type":"block", "liwidth":"avg", "bgcolor":"#000", "hcolor":["blue","rgb(10,100,100)","red","pink","green","rgba(23,234,22,1)","rgb(230,230,230)"] }); 源码:https://github.com/topqiang/xq_navbar 再次特请各位大牛指出不足。 跪拜!跪拜!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值