<!DOCTYPE html> <!--导航--> <html> <head lang="en"> <meta charset="UTF-8"> <!--宽度就是设备的宽度,缩放1.0,表示不缩放--> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <title></title> <!--jquerymobile必须依赖着3个库文件--> <script src="jquery-2.1.4.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <link href="jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> </head> <body> <!--定义导航--> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> <li><a href="#">four</a></li> </ul> </div> <!--定义头部导航--> <div data-role="header"> <h1>my head</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> <li><a href="#">four</a></li> </ul> </div> </div> <!--定义脚部导航--> <div data-role="footer"> <h1>my foot</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> <li><a href="#">four</a></li> </ul> </div> </div> <!--定义头部导航,引入图片系统图片,也可引入自己的图片--> <div data-role="header" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="grid" class="ui-btn-active">one</a></li> <li><a href="#" data-icon="star">two</a></li> <li><a href="#" data-icon="gear">three</a></li> </ul> </div> </div> </body></html>
源码下载:
http://download.csdn.net/download/zhaihaohao1/9164935
jQuery Mobile基础08----jQuery Mobile Widgets(2)-navbar(导航
最新推荐文章于 2022-04-16 10:50:09 发布