jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo
2014-06-05 21:35
633 查看
我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是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,共同学习!!!!
相关文章推荐
- demo for iphone苹果官方例子ios开发
- 手机开发实战41——手机模块设计2
- demo for iphone苹果官方例子ios开发
- 手机开发实战39——设计模式介绍
- Android手机UI设计---”知乎“界面外观模仿篇(一)---使用Fragment实现底部导航以及嵌套
- 【iPhone Demo】地图自定义大头针如何利用Android TabHost+ActivityGroup+Broadcast实现类似于iPhone的底部菜单
- 手机开发实战40——手机模块设计1
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
- 安卓开发:自定义PopupWindow,实现模仿iOS底部弹出菜单
- Android项目开发实战之使用Fragment和FragmentTabHost搭建底部菜单(一)
- demo for iphone苹果官方例子ios开发
- 实战开发问题总结(界面设计)----android应用如何适配于多个分辨率的手机
- 【Android】安卓开发实战之仿iPhone通讯录demo的移植和优化
- Programming Windows程式开发设计指南->第五章 例子程序5
- 问题:MTK手机软件开发平台中字串资源添加进去了,菜单也能用,但是菜单上的字符串显示不出来。
- 使用Eclipse RCP进行桌面程序开发(二):菜单、工具栏和对话框
- Visual C# 2008+SQL Server 2005 数据库与网络开发--13.1.3 简单记事本程序菜单设计
- Maemo Linux手机平台系列分析:(14) Maemo平台开发之 设计D-Bus server时要注意的若干问题
- Programming Windows程式开发设计指南->第七章 例子程序2
- J2ME手机游戏开发引擎的分析与设计