首页 > 代码库 > jQuery Mobile页面跳转切换的几种方式

jQuery Mobile页面跳转切换的几种方式

jQuery Mobile在移动开发中越来越受到欢迎。

而他的各个版本号也在持续不断的更新中。相同的我也非常喜欢它,它加快了我们开发HTML5的速度。


同一时候又具备jQuery一样的操作方法。

学起来也是相当的easy。所以这一片文章就是介绍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=http://www.mamicode.com/"#welPage" >跳转到第一个页面>其它方法:

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共同学习!

jQuery Mobile页面跳转切换的几种方式