jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮
2014-06-04 21:26
441 查看
在移动互联网时代,HTML5开发越来越收到欢迎。于是各种HTML5的框架都出来了。由于对于jquery的熟悉,jquery mobile 为多数人选择学习的对象。我也是众多追求者之一。最近一直在开发jQuery Mobile的相关应用。并颇有心得,再这里和大家一起分享一下。
好了,我们之间上代码:
更详细的学习资料,请点击下载:http://download.csdn.net/download/xmt1139057136/7447463
欢迎大家关注我的个人博客,如有不懂,请加qq群:135430763进行共同学习!
好了,我们之间上代码:
<!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
欢迎大家关注我的个人博客,如有不懂,请加qq群:135430763进行共同学习!
相关文章推荐
- jQuery Mobile(jqm)button的隐藏和显示,包含a标签,圆角和非圆角button
- EasyUI按钮控制标签显示与隐藏
- 显示或隐藏客户端页面中包含指定文字的DIV 标签
- [Visual Basic]VB源代码推荐: 动态的显示/隐藏start按钮
- 删除无法显示隐藏文件夹 删除包括:“aux”“com1”“com2”“prn
- 按钮的显示与隐藏
- 【方正BPM工作流】如何显示格式中UIScript隐藏按钮(JAVASCRIPT)
- 用同一按钮控制DIV的显示/隐藏
- Silverlight 通过点击按钮显示/隐藏DataGrid的RowDetail
- 利用5个标签,4个文本框,2个按钮,自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类,当点击“判断三边”时,若能构成三角形,在标签5上显示“可以构成三角形!”,如不能构成三角形,在标签5上显示“不能构成三
- GridView根据某行的内容显示或隐藏Edit按钮
- DataGridView 显示和隐藏DataGridViewButtonCell按钮的办法
- asp.net经典框架设计,带显示隐藏左部页面按钮.
- 单击按钮显示隐藏子菜单
- 根据条件,隐藏或显示gridview中的按钮或其他控件,
- 隐藏CTabCtrl标签页按钮
- javascript:单击按钮显示/隐藏文本框
- 利用一个按钮控制DIV的显示与隐藏
- 在VS2008的HTML设计器中,显示隐藏内容的一些标签
- spy4win 插件 显示隐藏窗口并突破灰色按钮