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. 爬虫之Urllib库的基本使用

    官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的HTTP请求库包括以下模块urllib.r ...

  2. POJ 3275 Floyd传递闭包

    题意:Farmer John想按照奶牛产奶的能力给她们排序.现在已知有N头奶牛(1 ≤ N ≤ 1,000).FJ通过比较,已经知道了M(1 ≤ M ≤ 10,000)对相对关系.每一对关系表示为&q ...

  3. 一次显式GC导致的High CPU问题处理过程

    项目现场反馈系统出现性能问题,具体表现为:所有的客户端响应极其卡顿. 第一反应推测,难道是DB层面出现阻塞?检查v$session会话状态及等待类型未见异常,应该可以排除DB层面原因导致的可能. 继续 ...

  4. javascript中caller和callee call和apply

    Arguments : 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n] 参数function :选项.当前正在执行的 Function 对象的名字. n ...

  5. 7.Performance Statistics（性能统计）

    利用性能分析器中统计的数据,来分析和发现,其中的性能瓶颈点. 1.设置Statistic Options View>Live Options中的Statistic Options设置可以设置需要 ...

  6. 创建我们第一个Monad

    上一篇中介绍了如何使用amplified type, 如IEnumerable<T>,如果我们能找到组合amplified type函数的方法,就会更容易写出强大的程序. 我们已经说了很多 ...

  7. Css 分类 属性 选择器

    Css 层叠样式表 美化页面的小工具 分类: 内联 (行内)在标签内部以属性的形式呈现,属性名style 内嵌 head标签内以标签形式呈现,标签名style 外部 head标签内 加link标签 引 ...

  8. String[]转化暴露“思维误区”

    那天写code,用到这个,强转,将页面传来的值转换为数组,结果是,当页面传来的只有一个值时,它是无法转换为数组的,只能获得1个string,只有length>1时才会转化为数组的形式,报的错误是 ...

  9. 谈谈c++中继承中的虚函数

      c++继承中的虚函数 c++是一种面向对象的编程语言的一个很明显的体现就是对继承机制的支持,c++中继承分很多种,按不同的分类有不同分类方法,比如可以按照基类的个数分为多继承和单继承,可以按照访问 ...

  10. MongoDB 博客截图之二

    使用内置帮助help() 基本命令示例 来源:MongoDB基本管理命令 - 千与的专栏 - 博客频道 - CSDN.NET