jqmタブ開発、ボトムラベルデザイン、jqmはiPhoneのデスクトップメニューを真似、jqm実戦開発、jqm開発例Demo
私には水産物の上司がいます.みんな知っています.だから私は独学するしかありません.今日はjQuery Mobileがiphoneの携帯電話のデスクトップを真似たタブ機能を持ってきました.例えば、電話、メール、ブラウザ、音楽のラベルメニューです.コードを直接入力します
皆さん、私のブログに注目してください.分からないことがあれば、qq群を追加してください.
135430763,共同学习!!!
<!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="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>
<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" id="page" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>
</h1>
<a href="javascript:location.reload();" data-role="button" class="ui-btn-right" data-icon="refresh"> </a>
</div>
<div data-role="content" id="show1">
<p>
， qq ：135430763， ！
</p>
</div>
<div data-role="content" id="show2" style="display: none;">
<p>
， qq ：135430763， ！
</p>
<p>
， qq ：135430763， ！
</p>
</div>
<div data-role="content" id="show3" style="display: none;">
<p>
， qq ：135430763， ！
</p>
<p>
， qq ：135430763， ！
</p>
<p>
， qq ：135430763， ！
</p>
</div>
<div data-role="content" id="show4" style="display: none;">
<p>
， qq ：135430763， ！
</p>
<p>
， qq ：135430763， ！
</p>
<p>
， qq ：135430763， ！
</p>
<p>
， qq ：135430763， ！
</p>
</div>
<div id="footer" class="nav-style" data-role="footer" data-theme="a" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- home -->
<li><a href="#" id="nav1" data-icon="home" onclick="fun1();return false;" class="ui-btn-active">One</a></li>
<li><a href="#" id="nav2" data-icon="grid" onclick="fun2();return false;">Two</a></li>
<li><a href="#" id="nav3" data-icon="search" onclick="fun3();return false;">Three</a></li>
<li><a href="#" id="nav4" data-icon="info" onclick="fun4();return false;">Four</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
皆さん、私のブログに注目してください.分からないことがあれば、qq群を追加してください.
135430763,共同学习!!!