jQueryMobile的组件之导航条(navbar)
2015-08-30 18:36
911 查看
data-role="navbar"——指明div元素承载导航条组件;
.ui-btn-active——设置按钮为选中状态;
data-icon——设置jQueryMobile的内置图标;
.ui-btn-active——设置按钮为选中状态;
data-icon——设置jQueryMobile的内置图标;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>navbar示例</title> <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"> <script src="jquery-1.11.1.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page_one"> <div data-role="header" data-position="fixed" data-theme="b"> <h1>Fun Here</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="grid">分类</a></li> <li><a href="#" data-icon="star">周边</a></li> <li><a href="#" data-icon="gear">设置</a></li> </ul> </div> </div> <div data-role="content"> <h2>主要内容</h2> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">分类</a></li> <li><a href="#" >周边</a></li> <li><a href="#" >我</a></li> </ul> </div> </div> </div> </body> </html>在iphone6中显示的效果为:
相关文章推荐
- JQuery基础
- jquery.mousewheel实现整屏翻屏效果
- jquery实现整屏翻屏效果:jquery.mousewheel(一)
- JQuery与Ajax的结合进行文本框内容验证
- IE8下jQuery改变png图片透明度时出现的黑边
- jquery datatable 参数
- jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效
- jQuery实现CheckBox全选、全不选
- Jquery Table 的基本操作
- jQuery鼠标事件汇总
- IE8下jQuery改变png图片透明度时出现的黑边问题
- 【JQuery】jQuery自制简易手风琴效果(附实现原理)
- jQuery.extend 函数详解
- jQuery中this与$(this)的区别
- jQuery div层渐入渐出效果
- jQueryMobile的组件之列表(listview)
- jQuery鼠标事件汇总
- IE8下jQuery改变png图片透明度时出现的黑边
- jquery.mousewheel实现整屏翻屏效果
- jQueryMobile的组件之栅格系统(grid)