在移动互联网时代,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进行共同学习！