jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

简介: 我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话,短信,浏览器,音乐的标签菜单。好吧,直接上代码:<pre code_snippet_id="378715" snippet_file_name="blog_20140605_1_1293162" name="code" class="ht
我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话,短信,浏览器,音乐的标签菜单。好吧,直接上代码:
<!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,共同学习!!!!

目录
相关文章
|
26天前
|
编解码 测试技术 iOS开发
iPhone 屏幕尺寸和开发适配
【10月更文挑战第23天】iPhone 的屏幕尺寸变化给开发者带来了一定的挑战,但也为创新提供了机遇。通过深入了解不同屏幕尺寸的特点,遵循适配原则和策略,运用合适的技巧和方法,我们能够为用户提供在不同 iPhone 机型上都具有良好体验的应用。在未来,随着技术的不断进步,我们还需要持续学习和适应,以满足用户对优质应用体验的不断追求。
|
26天前
|
编解码 iOS开发 UED
响应式设计在 iPhone 开发适配中的具体应用
【10月更文挑战第23天】响应式设计在 iPhone 开发适配中扮演着至关重要的角色,它能够帮助我们打造出适应不同屏幕尺寸和用户需求的高质量应用。通过合理运用响应式设计的原则和方法,我们可以在提供良好用户体验的同时,提高开发效率和应用的可维护性。
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
645 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
1月前
|
小程序
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
30 0
|
3月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
67 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
3月前
|
数据采集 iOS开发 Python
Chatgpt教你开发iPhone风格计算器,Python代码实现
Chatgpt教你开发iPhone风格计算器,Python代码实现
|
3月前
|
存储 监控 开发工具
Django 后端架构开发:手机与邮箱验证码接入、腾讯云短信SDK和网易邮箱
Django 后端架构开发:手机与邮箱验证码接入、腾讯云短信SDK和网易邮箱
65 0
|
4月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
4月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改