670
jQuery Mobile頁麵跳轉切換的幾種方式
jQuery Mobile在移動開發中越來越受到歡迎。而他的各個版本也在持續不斷的更新中。同樣的我也很喜歡它，它加快了我們開發HTML5的速度。同時又具備jQuery一樣的操作方法。學起來也是相當的容易。所以這一片文章就是介紹jQuery Mobile的頁麵跳轉的。
少說廢話，看源碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mobile頁麵跳轉切換的幾種方式</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.4.2/jquery.mobile-1.4.2.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="../jQuery/jquery.mobile-1.3.2.min.css">
<script type="text/javascript" src="../jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jQuery/jquery.mobile-1.3.2.min.js"></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>我是第一個頁麵</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<a href="#nextPage" >跳轉到下一個頁麵</a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h1>
濤哥偽專家管理係統
</h1>
</div>
</div>
<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>我是第二個頁麵</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<a href="#goPage" >跳轉到下一個頁麵</a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h1>
濤哥偽專家管理係統
</h1>
</div>
</div>
<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>我是第三個頁麵</p>
<p>
如有不懂，請加qq群：135430763，共同學習！
</p>
<p>有幾種方法來切換頁麵</p>
<p>1. $.mobile.changePage ('../path/to/page.html');</p>
<p>2. $.mobile.changePage ('other/page.html', 'fade', false, false);</p>
<p>可以設定頁麵切換效果，以及定義參數來控製頁麵是否記錄曆史等</p>
<p>3.var pageData = { url: formresults.php, type: 'get', data:</p>
<p>$('form#myform').serialize () };</p>
<p>$.mobile.changePage (pageData);</p>
<p>將頁麵url，類型，數據定義為變量來傳遞。</p>
<p>4.var previousPage = $.mobile.activePage.data ('ui.prevPage');</p>
<p>$.mobile.changePage ([previousPage, anotherPreviousPage], 'pop');</p>
<p>使用changepage來加載第三個頁麵</p>
<p>5.$.mobile.pageLoading (); /顯示加載信息</p>
<p>$.mobile.pageLoading (true); //隱藏</p>
<p>pageLoading(boolean done)</p>
<p>函數顯示或隱藏頁麵加載的提示信息。可以在$.mobile.loadingMessage變量中設置。</p>
<p>6 .$.mobile.silentScroll (100);</p>
<p>silentScroll (number yPos): 在Y軸上（默認為0）滾動頁麵而不需要觸發scroll事件</p>
<a href="#welPage" >跳轉到第一個頁麵</a>
</div>
<div data-role="footer" data-theme="a" data-position="fixed">
<h1>
濤哥偽專家管理係統
</h1>
</div>
</div>
<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>
</body>
</html>
其他方法：1. $.mobile.changePage ('../path/to/page.html');
2. $.mobile.changePage ('other/page.html', 'fade', false, false);
可以設定頁麵切換效果，以及定義參數來控製頁麵是否記錄曆史等
3.var pageData = { url: formresults.php, type: 'get', data:
$('form#myform').serialize () };
$.mobile.changePage (pageData);
將頁麵url，類型，數據定義為變量來傳遞。4.
var previousPage = $.mobile.activePage.data ('ui.prevPage');
$.mobile.changePage ([previousPage, anotherPreviousPage], 'pop');
使用changepage來加載第三個頁麵
5.$.mobile.pageLoading (); /顯示加載信息
$.mobile.pageLoading (true); //隱藏
pageLoading(boolean done)
函數顯示或隱藏頁麵加載的提示信息。可以在$.mobile.loadingMessage變量中設置。
6 .$.mobile.silentScroll (100);
silentScroll (number yPos): 在Y軸上（默認為0）滾動頁麵而不需要觸發scroll事件
OK,到此結束了，歡迎大家關注我的個人博客。
如有不懂，請大家加入qq群：135430763共同學習！
最後更新：2017-04-03 07:57:02