在移动互联网时代,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. kettle 使用excel模板导出数据

    通过excel进行高速开发报表: 建设思路: 1.首先制订相关的execl模板. 2.通过etl工具(kettle)能够高速的 将数据库中的数据按excel模板导出成新的excel就可以. 当中ket ...

  2. 王立平--Object-c

    object-c通常写作objective-c或者obj-c,是依据C语言所衍生出来的语言.继承了C语言的特性,是扩充C的面向对象编程语言. 它主要使用于MacOSX和GNUstep这两个使用Open ...

  3. nyoj--1185--最大最小值（线段树）

    最大最小值 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 给出N个整数,执行M次询问. 对于每次询问,首先输入三个整数C.L.R: 如果C等于1,输出第L个数到第R个数 ...

  4. python中在py代码中如何去调用操作系统的命令

    import socket import subprocess sk = socket.socket() sk.bind(('127.0.0.1',10800)) sk.listen() conn,a ...

  5. Spring学习笔记（一） 简介

    版权声明 本文是摘自IBM上Naveen Balani的一篇文章,原文请点击此处:http://www.ibm.com/developerworks/cn/java/wa-spring1/ Sprin ...

  6. Qt-窗口部件概念介绍

    前言:包括基础窗口部件QWidget.对话框QDialog.QFrame类族 .按钮部件.行编辑器.数值设定框以及滑块部件. 一.基础窗口部件QWidget 窗口部件(Widget)是Qt中建立用户界 ...

  7. 继承TabActivity后不执行onBackPressed()里的方法

    // 用下面这个函数拦截子Activity的返回操作        @Override        public boolean dispatchKeyEvent(KeyEvent event) { ...

  8. oracle调优使用到相关sql

    select * from v$session where username is not null;select username,count(username) from v$session wh ...

  9. markdown写作软件推荐

    最近发现了一款不错的编辑器,而且是全平台支持的.与其它一些 markdown 编辑器最大的不一样是——所见即所得,不再是一边源文件一遍预览的方式了. 总的说来 Typora 很赞,推荐一波. 点此前往 ...

  10. CPU VS GPU

    CPU VS GPU 关于绘图和动画有两种处理的方式:CPU(中央处理器)和GPU(图形处理器).在现代iOS设备中,都有可以运行不同软件的可编程芯片,但是由于历史原因,我们可以说CPU所做的工作都在 ...