专栏首页业余草jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

在移动互联网时代,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>
				点击按钮2,隐藏按钮1,并且将按钮2改为圆角
			</p><p>
				点击按钮3,显示按钮1,并且将按钮2改为非圆角
			</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="我是按钮1" data-inline="true" id="btn1">
				<input type="button" value="我是按钮2" data-inline="true" id="btn2">
				<input type="button" value="我是按钮3" data-inline="true" id="btn3">
			</div>
			
			<p>
				点击按钮5,隐藏按钮4,并且将按钮5改为圆角
			</p>
			<p>
				点击按钮6,显示按钮4,并且将按钮5改为非圆角
			</p>
			
			<div data-role="controlgroup" data-type="horizontal">
				<a href="#" data-role="button" id="a4">我是按钮4</a>
				<a href="#" data-role="button" id="a5" onclick="hideA();return false;">我是按钮5</a>
				<a href="#" data-role="button" id="a6" onclick="showA();return false;">我是按钮6</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">
		//给按钮2绑定click事件
		$('#btn2').unbind().bind('click',function(){
			//隐藏按钮1
			$('#btn1').parent("div").css('display','none');
			//给按钮2添加样式,使按钮2变成圆角
			$('#btn2').parent("div").addClass('ui-first-child');
		});
	    //给按钮3绑定click事件
		$('#btn3').unbind().bind('click',function(){
			//隐藏按钮1
			$('#btn1').parent("div").css('display','');
			//给按钮2减去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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用knockout-sortable实现对自定义菜单的拖拽排序

    关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html

    雪雁-心莱科技
  • jQuery Mobile修改button的内容

    jQuery Mobile修改button的内容。

    业余草
  • 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)

    本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

    剽悍一小兔
  • jquery顶部固定层下拉导航

    最近有人在论坛里讨论怎么制作导航菜单!我关注了一下,这里就写了一个简单的demo。供大家参考。代码如下:

    业余草
  • EasyUI之Form load函数IE8下设置Radio或Checkbox的BUG

    EasyUI的form的load函数很好用,表单赋值就靠它了,简单方便。我们可以指定url以Ajax加载,如:

    雪雁-心莱科技
  • jQuery Mobile图片轮转轮播

    最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!

    业余草
  • 使用jQuery的ajax同步请求吃过的亏

    jQuery是一个很常用的js库。甚至我们开发任何一个项目都首先把jquery导入进行。jQuery太过强大,使用起来非常方便...

    业余草
  • HTML5的data-*自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

    业余草
  • jQuery Mobile中jQuery.mobile.changePage方法使用详解

    jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方...

    业余草
  • jQuery Mobile 自定义标签

    最近在规划产品国际化的需求,涉及到PC Web,移动Web,和各app。设计了多个版本的移动Web均不理想。 由于移动Web采...

    业余草

扫码关注云+社区

领取腾讯云代金券