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="#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共同学习！

jQuery Mobile页面跳转切换的几种方式的更多相关文章

  1. js页面跳转常用的几种方式（转）

    js页面跳转常用的几种方式 转载  2010-11-25   作者:    我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...

  2. jquery mobile页面跳转缓存问题解决

    最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...

  3. jQuery Mobile页面跳转后未加载外部JS(转)

    http://thewaychung.iteye.com/blog/1807447 在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中 ...

  4. jquery mobile页面跳转后，必须重新刷新页面js方可有效

    最近在做个项目,用到jquery mobile,很陌生对他,问题一个个的来,那就要一个个解决,找了一天这个问题,放可明白:首先明白jqm里面页面跳转默认都是通过ajax请求的,必须重新刷新页面js方可 ...

  5. jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data ...

  6. asp.net 页面跳转传值的几种方式

    参考地址: http://blog.csdn.net/zzzzzzzert/article/details/8486143 protected void Button1_Click(object se ...

  7. JS实现页面跳转重定向的几种方式

    1.重定向 <script language="javascript"type="text/javascript">  window.locatio ...

  8. js页面跳转常用的几种方式

    第一种: <script language="javascript" type="text/javascript"> window.location ...

  9. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

随机推荐

  1. CodeForces 486B

    Let's define logical OR as an operation on two logical values (i. e. values that belong to the set { ...

  2. VUEJS2.0源码理解--优

    VUEJS2.0源码理解 http://jiongks.name/blog/vue-code-review/#pingback-112428

  3. Solr.NET快速入门(三)【高亮显示】

    此功能会"高亮显示"匹配查询的字词(通常使用标记),包括匹配字词周围的文字片段. 要启用高亮显示,请包括HighlightingParameters QueryOptions对象, ...

  4. C# WinForm的练习

    今天写了一个WinForm的练习,将源代码贴出来和大家一起学习学习. 首先:按照下图将一个button控件.三个RadioButton控件.三个CheckBox控件.一个Label控件和一个Track ...

  5. JsonResult

    注意:如果有大量的json数据要处理,建议使用ASP .NET Web API框架处理,专门用来处理json数据交换并提供跨平台访问能力的 ConentType设置为application/json ...

  6. mysql和eclipse连接jdbc驱动配置

    环境Windows10 eclipse 64位 MySQL 一:资料准备 (MySQL,eclipse下载安装不在赘述) 配置好MySQL环境后 下载jdbc地址http://dev.mysql.co ...

  7. 【Oracle】查询当前SCN

    介绍两种方式: 一.sys用户下: select current_scn from v$database; select dbms_flashback.get_system_change_number ...

  8. 文件被占用导致Hive Load文件不成功

    用Python写了个用LOAD命令将文件导入Hive的程序,开始代码写成下面这样: def loadToHive(bakFilePath, tbName): try: transport = TSoc ...

  9. Angular ui-router的常用配置参数详解

    一.$urlRouterProvider服务 $urlRouterProvidfer负责监听$location,当$location变化时,$urlRouterProvider将在规则列表中查找匹配的 ...

  10. Java中数组获取最大值

    最大值获取:从数组的所有元素中找出最大值. 实现思路: 定义变量,保存数组0索引上的元素 遍历数组,获取出数组中的每个元素 将遍历到的元素和保存数组0索引上值的变量进行比较 如果数组元素的值大于了变量 ...