jQuery Mobile页面跳转切换的几种方式
同时又具备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="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事件
OK,到此结束了,欢迎大家关注我的个人博客。
如有不懂,请大家加入qq群:135430763共同学习!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。