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. bzoj5194: [Usaco2018 Feb]Snow Boots

    还真是.. 就是 一个被不点名批评的垃圾骗分暴力选手被普及难度的省选信心(??)模拟赛艹爆的题解 的t3嘛... #include<cstdio> #include<iostream ...

  2. poj1700--贪心--Crossing River

    Crossing River Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12260   Accepted: 4641 D ...

  3. 【撸码caffe 二】 blob.hpp

    Blob类是caffe中对处理和传递的实际数据的封装,是caffe中基本的数据存储单元,包括前向传播中的图像数据,反向传播中的梯度数据以及网络层间的中间数据变量(包括权值,偏置等),训练模型的参数等等 ...

  4. Tomcat修改默认根目录

    tomcat7默认的程序发布路径为tomcat/webapps/ROOT/下面 修改Tomcat配置文件server.xml <Host name="localhost" a ...

  5. Java程序连接各种数据库的driver和url形式

    1.Oracle数据库 Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); String url = & ...

  6. Java单例模式 多种实现方式

    一:通过静态私有成员实现单例模式 (1):私有化构造函数 (2):new静态实例属性对象,加锁. 单例类: package SinglePag; /* * 构造函数私有化,结合锁+静态的概念 实现单例 ...

  7. Walking on the path of Redis --- Data structure

    废话开篇 相比于其他内存数据库,Redis最大的特点就是拥有丰富的数据结构, 经常被称为Date Structure Server.Redis支持的数据结构包含strings, hashes, lis ...

  8. 暴雪的hash算法[翻译]

    原文来自:http://sfsrealm.hopto.org/inside_mopaq/chapter2.htm#hashes 促进历史进步的大多数契机都是在解决特定问题的过程中产生的,本文讨论一下M ...

  9. day01_20181223

    今日内容大纲:1,python的出生于应用.2,Python的历史.    python2x:        源码冗余,源码重复,源码不规范.    python3x:源码清晰优美简单.       ...

  10. node——四种注册路由方式

      app.get和app.post 1.请求的方法必须是get/post2.请求的路径的pathname必须等于(====)路径 app.use 1.在进行路由匹配的时候不限定方法,什么请求方法都可 ...