標籤：jqm頁面跳轉 jqm中page切換 jqm隱藏顯示控制項 jqm頁面配置 jqm多頁面切換
jQuery Mobile在移動開發中越來越受到歡迎。而他的各個版本也在持續不斷的更新中。同樣的我也很喜歡它，它加快了我們開發HTML5的速度。<!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="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://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" id="welPage" 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"><p>我是第一個頁面</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><a href="#nextPage" >跳轉到下一個頁面</a></div><div id="footer" data-role="footer" data-theme="a" data-position="fixed"><h1>濤哥偽專家管理系統</h1></div></div><div data-role="page" id="nextPage" 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"><p>我是第二個頁面</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><p>如有不懂，請加qq群：135430763，共同學習！</p><a href="#goPage" >跳轉到下一個頁面</a></div><div id="footer" data-role="footer" data-theme="a" data-position="fixed"><h1>濤哥偽專家管理系統</h1></div></div><div data-role="page" id="goPage" 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"><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 id="footer" 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事件
如有不懂，請大家加入qq群：135430763共同學習！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
