jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo
来源:互联网 发布:linux查看git服务 编辑:程序博客网 时间:2024/06/05 08:25
我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话,短信,浏览器,音乐的标签菜单。好吧,直接上代码:
欢迎大家关注本人博客,如有不懂,请加qq群:135430763,共同学习!!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>jQuery Mobile模仿iphone菜单项</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script type="text/javascript">//home菜单的onclick事件的处理方法function fun1(){//激活nav1$('#nav1').addClass('ui-btn-active');//显示我home菜单的内容$('#show1').css('display','');//grid,search,info都隐藏$('#show2').css('display','none');$('#show3').css('display','none');$('#show4').css('display','none');//nav2,nav3,nav4 取消激活$('#nav2').removeClass('ui-btn-active');$('#nav3').removeClass('ui-btn-active');$('#nav4').removeClass('ui-btn-active');}//grid菜单的onclick事件的处理方法function fun2(){//激活nav2$('#nav2').addClass('ui-btn-active');//显示我grid菜单的内容,home,search,info都隐藏$('#show1').css('display','none');$('#show2').css('display','');$('#show3').css('display','none');$('#show4').css('display','none');//nav1,nav3,nav4 取消激活$('#nav1').removeClass('ui-btn-active');$('#nav3').removeClass('ui-btn-active');$('#nav4').removeClass('ui-btn-active');}//search菜单的onclick事件的处理方法function fun3(){//激活nav3$('#nav3').addClass('ui-btn-active');$('#show1').css('display','none');$('#show2').css('display','none');//显示我search菜单的内容,home,grid,info都隐藏$('#show3').css('display','');$('#show4').css('display','none');//nav1,nav2,nav4 取消激活$('#nav2').removeClass('ui-btn-active');$('#nav1').removeClass('ui-btn-active');$('#nav4').removeClass('ui-btn-active');}//info菜单的onclick事件的处理方法function fun4(){$('#nav4').addClass('ui-btn-active');$('#show1').css('display','none');$('#show2').css('display','none');$('#show3').css('display','none');//显示我info菜单的内容,home,grid,search都隐藏$('#show4').css('display','');//nav1,nav2,nav3 取消激活$('#nav2').removeClass('ui-btn-active');$('#nav3').removeClass('ui-btn-active');$('#nav1').removeClass('ui-btn-active');}</script> </head> <body> <div data-role="page" id="page" data-theme="a"><div data-role="header" data-position="fixed" data-theme="a"><h1>涛哥伪专家管理系统</h1><a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a></div><div data-role="content" id="show1"><p>如有不懂,请加qq群:135430763,共同学习!</p></div><div data-role="content" id="show2" style="display: none;"><p>如有不懂,请加qq群:135430763,共同学习!</p><p>如有不懂,请加qq群:135430763,共同学习!</p></div><div data-role="content" id="show3" style="display: none;"><p>如有不懂,请加qq群:135430763,共同学习!</p><p>如有不懂,请加qq群:135430763,共同学习!</p><p>如有不懂,请加qq群:135430763,共同学习!</p></div><div data-role="content" id="show4" style="display: none;"><p>如有不懂,请加qq群:135430763,共同学习!</p><p>如有不懂,请加qq群:135430763,共同学习!</p><p>如有不懂,请加qq群:135430763,共同学习!</p><p>如有不懂,请加qq群:135430763,共同学习!</p></div><div id="footer" class="nav-style" data-role="footer" data-theme="a" data-position="fixed"><div data-role="navbar"> <ul> <!-- 默认显示home菜单 --> <li><a href="#" id="nav1" data-icon="home" onclick="fun1();return false;" class="ui-btn-active">One</a></li> <li><a href="#" id="nav2" data-icon="grid" onclick="fun2();return false;">Two</a></li> <li><a href="#" id="nav3" data-icon="search" onclick="fun3();return false;">Three</a></li> <li><a href="#" id="nav4" data-icon="info" onclick="fun4();return false;">Four</a></li> </ul></div></div></div> </body></html>更多功能示例,请点击下载:http://download.csdn.net/download/xmt1139057136/7451815
欢迎大家关注本人博客,如有不懂,请加qq群:135430763,共同学习!!!!
63 2
- jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo
- jqm(jquery mobile)开发手记
- jQM note:开发工具的选择
- jqm移动网站开发-web app
- JQM写的手机web简单例子
- JQM List
- JQM属性
- 初见jqm
- backbone.js+jqm+html5的移动App开发总结一
- SpringMVC+JQueryMobile开发 data-external-page与JQM机制
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
- JQM手机旋转后改Size
- JQM 动态加载listview
- JQM动态加载 collapsible
- phonegap+jqm的示例
- jqm 事件速记表
- JQM 学习(一)
- uip UDP 服务器广播模式(客户端可以任意端口,并且主动向客户端发送数据)
- Maven中pom.xml的配置和标签说明
- 关联函数lrs_save_param
- sdut2144图结构练习——最小生成树
- 丰哥的presentation
- jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo
- JAVA PriorityQueue实现定制排序
- Java线程(篇外篇):阻塞队列BlockingQueue
- PYTHON基础教程中的十个项目(1)
- IOS程序创建一个控制器
- opencv中的cvCircle函数
- 第十五周上机实践项目——用文件保存的学生名单
- <转>Java Socket常见异常处理
- 数据结构 线性表之链表