915
jqm選項卡開發,底部標簽式設計,jqm模仿iPhone手機桌麵菜單,jqm實戰開發,jqm開發例子Demo
我有一個水貨的上司，大家都是知道的。所以我就隻能自學了，今天我給大家帶來的是jQuery Mobile 模仿iphone 手機桌麵的選項卡功能。比如電話，短信，瀏覽器，音樂的標簽菜單。好吧，直接上代碼：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mobile模仿iphone菜單項</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>
<script type="text/javascript">
//home菜單的onclick事件的處理方法
function fun1(){
//激活nav1
$('#nav1').addClass('ui-btn-active');
//顯示我home菜單的內容
$('#show1').css('display','');
//grid,search,info都隱藏
$('#show2').css('display','none');
$('#show3').css('display','none');
$('#show4').css('display','none');
//nav2，nav3，nav4 取消激活
$('#nav2').removeClass('ui-btn-active');
$('#nav3').removeClass('ui-btn-active');
$('#nav4').removeClass('ui-btn-active');
}
//grid菜單的onclick事件的處理方法
function fun2(){
//激活nav2
$('#nav2').addClass('ui-btn-active');
//顯示我grid菜單的內容,home,search,info都隱藏
$('#show1').css('display','none');
$('#show2').css('display','');
$('#show3').css('display','none');
$('#show4').css('display','none');
//nav1，nav3，nav4 取消激活
$('#nav1').removeClass('ui-btn-active');
$('#nav3').removeClass('ui-btn-active');
$('#nav4').removeClass('ui-btn-active');
}
//search菜單的onclick事件的處理方法
function fun3(){
//激活nav3
$('#nav3').addClass('ui-btn-active');
$('#show1').css('display','none');
$('#show2').css('display','none');
//顯示我search菜單的內容,home,grid,info都隱藏
$('#show3').css('display','');
$('#show4').css('display','none');
//nav1，nav2，nav4 取消激活
$('#nav2').removeClass('ui-btn-active');
$('#nav1').removeClass('ui-btn-active');
$('#nav4').removeClass('ui-btn-active');
}
//info菜單的onclick事件的處理方法
function fun4(){
$('#nav4').addClass('ui-btn-active');
$('#show1').css('display','none');
$('#show2').css('display','none');
$('#show3').css('display','none');
//顯示我info菜單的內容,home,grid,search都隱藏
$('#show4').css('display','');
//nav1，nav2，nav3 取消激活
$('#nav2').removeClass('ui-btn-active');
$('#nav3').removeClass('ui-btn-active');
$('#nav1').removeClass('ui-btn-active');
}
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>
濤哥偽專家管理係統
</h1>
<a href="javascript:location.reload();" data-role="button" data-icon="refresh">刷新</a>
</div>
<div data-role="content" >
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
</div>
<div data-role="content" >
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
</div>
<div data-role="content" >
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
</div>
<div data-role="content" >
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- 默認顯示home菜單 -->
<li><a href="#" data-icon="home" >One</a></li>
<li><a href="#" data-icon="grid" >Two</a></li>
<li><a href="#" data-icon="search" >Three</a></li>
<li><a href="#" data-icon="info" >Four</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
更多功能示例，請點擊下載：https://download.csdn.net/download/xmt1139057136/7451815歡迎大家關注本人博客，如有不懂，請加qq群：135430763，共同學習！！！！
最後更新：2017-04-03 08:26:26