在移动互联网时代,HTML5开发越来越收到欢迎。

于是各种HTML5的框架都出来了。因为对于jquery的熟悉，jquery mobile 为多数人选择学习的对象。我也是众多追求者之中的一个。近期一直在开发jQuery Mobile的相关应用。

并颇有心得。再这里和大家一起分享一下。

好了，我们之间上代码： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>如有不懂。请加qq群：135430763，共同学习！

</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>

  </head>

  <body>

    <div data-role="page" id="page" data-theme="b">

		<div data-role="header" data-position="fixed" data-theme="b">

			<h1>

				如有不懂，请加qq群：135430763。共同学习！

</h1>

			<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh">刷新</a>

		</div>

		<div data-role="content">

			<p>

				点击button2。隐藏button1。而且将button2改为圆角

			</p><p>

				点击button3。显示button1，而且将button2改为非圆角

			</p>

			<p>

				如有不懂，请加qq群：135430763。共同学习！

</p>

			<p>

				如有不懂，请加qq群：135430763，共同学习。

			</p>

			<p>

				如有不懂。请加qq群：135430763，共同学习！

			</p>

			<p>

				如有不懂，请加qq群：135430763，共同学习！

</p>

			<div data-role="controlgroup" data-type="horizontal">

				<input type="button" value="我是button1" data-inline="true" id="btn1">

				<input type="button" value="我是button2" data-inline="true" id="btn2">

				<input type="button" value="我是button3" data-inline="true" id="btn3">

			</div>

			<p>

				点击button5，隐藏button4。而且将button5改为圆角

			</p>

			<p>

				点击button6，显示button4，而且将button5改为非圆角

			</p>

			<div data-role="controlgroup" data-type="horizontal">

				<a href="#" data-role="button" id="a4">我是button4</a>

				<a href="#" data-role="button" id="a5" onclick="hideA();return false;">我是button5</a>

				<a href="#" data-role="button" id="a6" onclick="showA();return false;">我是button6</a>

			</div>

		</div>

		<div data-role="footer" data-position="fixed" data-theme="b">

			<span style="height: 40px; line-height: 40px; text-align: center; display: block; font-size: 9px;">如有不懂，请加qq群：135430763，共同学习！</span>

		</div>

	</div>

	<script type="text/javascript">

		//给button2绑定click事件

		$('#btn2').unbind().bind('click',function(){

			//隐藏button1

			$('#btn1').parent("div").css('display','none');

			//给button2加入样式，使button2变成圆角

			$('#btn2').parent("div").addClass('ui-first-child');

		});

	    //给button3绑定click事件

		$('#btn3').unbind().bind('click',function(){

			//隐藏button1

			$('#btn1').parent("div").css('display','');

			//给button2减去ui-first-child样式

			$('#btn2').parent("div").removeClass('ui-first-child');

		});

		//a5标签的onclick事件

		function hideA(){

			$('#a4').css('display','none');

			//给a5标签加入样式，使a5标签变成圆角

			$('#a5').addClass('ui-first-child');

		}

		//a6标签的onclick事件

		function showA(){

			$('#a4').css('display','');

			//给a5标签删除样式，使a5标签变成非圆角

			$('#a5').removeClass('ui-first-child');

		}

	</script>

  </body>

</html>

在看看执行效果：

更具体的学习资料，请点击下载：http://download.csdn.net/download/xmt1139057136/7447463

欢迎大家关注我的个人博客，如有不懂，请加qq群：135430763进行共同学习！

jQuery Mobile(jqm)button的隐藏和显示,包含a标签,圆角和非圆角button的更多相关文章

  1. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  2. jquery动画（控制动画隐藏、显示时间轴）

    <!DOCTYPE html><html> <head>    <meta http-equiv="Content-type" conte ...

  3. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等（二）

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...

  4. jQuery关于复制（复制隐藏文字+显示文字）跳转，Clipboard

    html: (直接上扎实的数据,框子自己搭建) <script type="text/javascript" src="../../js/jquery.min.js ...

  5. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  6. jquery的隐藏与显示

    ###显示与隐藏,通过用hide()和show()函数来实现 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback ...

  7. jquery mobile将页面内容当成弹框进行显示

    注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...

  8. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  9. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

随机推荐

  1. Nagios监控nginx服务具体过程

    1在nginx 服务器上安装nrpe客户端: Nginx的服务须要监控起来.不然万一down了而不及时修复,会影响web应用.例如以下web应用上面启动的nginx后台进程[root@lb-net-2 ...

  2. thinkPHP 空模块和空操作、前置操作和后置操作 具体介绍（十四）

    本章节:介绍 TP 空模块和空操作.前置操作和后置操作 具体介绍 一.空模块和空操作 1.空操作 function _empty($name){ $this->show("$name ...

  3. php生产随机数

    php生产随机数 要求 生产三种随机数 1.全数字 2.全字母,大小写 3.数字和大小写字母 代码 <?php class RandString{ //这个属性表示我们随机数的长度,也就是个数 ...

  4. NEU 1040 Count

    1040: Count 时间限制: 1 Sec  内存限制: 128 MB提交: 59  解决: 23[提交][状态][讨论版] 题目描述 Many ACM team name may be very ...

  5. JavaScript-Tool：md5.js

    ylbtech-JavaScript-Tool:md5.js 1.返回顶部 1.md5.js /* CryptoJS v3.1.2 code.google.com/p/crypto-js (c) 20 ...

  6. js接收文件流并下载

    js接收文件流并下载 标签(空格分隔): js 在此输入正文 <script type="text/javascript"> function download(fil ...

  7. BZOJ 2141 分块 线段树

    思路: a[i] //By SiriusRen #include <cmath> #include <cstdio> #include <cstring> #inc ...

  8. ES6常用特性

    以下是ES6排名前十的最佳特性列表(排名不分先后): Default Parameters(默认参数) in ES6 Template Literals (模板文本)in ES6 Multi-line ...

  9. js 判断设备的来源

    function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone& ...

  10. Data type-数据类型

    操作方式.含义.存储方式. In computer science and computer programming, a data type or simply type is a classifi ...