313
技術社區[雲棲]
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="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="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" 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" >
<input type="button" value="我是按鈕2" data-inline="true" >
<input type="button" value="我是按鈕3" data-inline="true" >
</div>
<p>
點擊按鈕5，隱藏按鈕4，並且將按鈕5改為圓角
</p>
<p>
點擊按鈕6，顯示按鈕4，並且將按鈕5改為非圓角
</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" >我是按鈕4</a>
<a href="#" data-role="button" >我是按鈕5</a>
<a href="#" data-role="button" >我是按鈕6</a>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<span >如有不懂，請加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>
在看看運行效果：
更詳細的學習資料，請點擊下載：https://download.csdn.net/download/xmt1139057136/7447463
歡迎大家關注我的個人博客，如有不懂，請加qq群：135430763進行共同學習！
最後更新：2017-04-03 08:26:25