jQuery移动web开发之页面跳转和加载外部页面的实现


Posted in Javascript onDecember 04, 2015

changePage() 页面跳转

jQuery.mobile.changePage( to [, options ] )

从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现。但要使用此方式的时候,要以点击一个链接或者提交表单来实现。此方法有两个参数。

to:是第一个参数,是必须的,不可缺少。类型:字符串或者对象。

字符串: 绝对或相对URL地址。如:("about/us.html")

对象:
jquery选择器对象,如:($("#about"))。
一个指定了两个页面引用的数组[from,to] ,用以在已知的page进行跳转. From 是当前所能看到的页面( 或者是 $.mobile.activePage )。
发送表单数据的对象,如({to: url, data: serialized form data, type: "get" or "post"} 。

options:是第二个参数,是可选。类型:对象

allowSamePageTransition(布尔值,默认:false)
默认情况下,changePage() 会忽略跳转到已活动的页面的请求。如果把这项设为true,会使之执行。开发者应该注意有些页面的转场会假定一个跳转页面的请求中来自的页面和目标的页面是不同的,所以不会有转场动画。

changeHash(布尔值,默认:true)
判断地址栏的哈希值是否应被更新。

data(字符串 或 对象,默认:undefined)
要通过ajax请求发送的数据,只在changePage() 的 to 参数 是一个地址的时候可用。

dataUrl(字符串,默认:undefined)
完成页面转换时要更新浏览器地址的URL地址。如不特别指定,则使用页面的data-url属性值。

pageContainer(jQuery选择器,默认:$.mobile.pageContainer)指定应该包含页面的容器。

reloadPage(布尔值,默认:false)
强制刷新页面, 即使当页面容器中的dom元素已经准备好时,也强制刷新。只在changePage() 的 to 参数 是一个地址的时候可用。

reverse(布尔值,默认:false)
设定页面转场动画的方向,设置为true时将导致反方向的转场。

role(字符串,默认:undefined)
显示页面的时候使用data-role值。默认情况下此参数为认:undefined,意为取决于元素的@data-role属性。

showLoadMsg(布尔值,默认:true) 设定加载外部页面时是否显示loading信息。

transition(字符串,默认:$.mobile.defaultPageTransition)使用显示的页面时,过渡。

type(字符串,默认:get)
指定页面请求的时候使用的方法("get" 或者 "post")。只在changePage() 的 to 参数 是一个地址的时候可用。

//以slideup效果 跳转到 "about us" 页面

$.mobile.changePage("about/us.html", "slideup"); 
//以pop效果 跳转到 "confirm" 页面 并且在url hash里不记录其历史

$.mobile.changePage("../alerts/confirm.html", "pop", false, false); 
//跳转到 "search results" 页面,提交id为 "search"的表单数据

$.mobile.changePage({url:"searchresults.php" , type:"get" , data: $("form#search").serialize() }); 
//将页面url,类型,数据定义为变量来传递。

var pageData = { url: formresults.php, type: 'get', data:$('form#myform').serialize () };

$.mobile.changePage(pageData);
//使用changepage来加载第三个页面

var previousPage = $.mobile.activePage.data ('ui.prevPage');

$.mobile.changePage([previousPage, anotherPreviousPage], 'pop');

loadPage() 加载外部页面

jQuery.mobile.loadPage( url [, options ] )

加载一个外部页面,附加其内容,并将其插入到DOM

url:是第一个参数。是必须的。类型:字符串或者对象。

options:第二个参数。是可选的。类型:对象。

allowSamePageTransition (default: false)
类型:布尔值
默认情况下,changepage()忽略请求改变当前页面。这个选项设置为true,允许请求执行。开发人员应该注意的一些网页过渡假设一个changepage请求设置FromPage、ToPage是不同的,所以他们可能不会如预期的动画。开发人员负责提供适当的过渡,或关闭这个特定的情况下。

changeHash (default: true)
类型:布尔值
如果地址栏中的哈希值应更新

data (default: undefined)
类型:数据或者字符串
要发送的数据与一个AJAX页面请求

loadMsgDelay (default: 50)
类型:数字
被迫延迟(毫秒)显示之前加载信息。这是为了让一个页面已经访问了被从缓存中取得没有加载信息的时间

pageContainer (default: $.mobile.pageContainer)
类型:jQuery选择器
指定要包含的页面元素

reloadPage (default: false)
类型:布尔值
强制刷新页面, 即使当页面容器中的dom元素已经准备好时,也强制刷新。只在changePage() 的 to 参数 是一个地址的时候可用。

role (default: undefined)
类型:字符串
显示页面的时候使用data-role值。默认情况下此参数为认:undefined,依赖于元素的@data-role属性。

showLoadMsg (default: true)
类型:布尔值
加载外部页面时,设定是否显示loading信息。

transition (default: $.mobile.defaultPageTransition)
类型:字符串
使用显示的页面时,过渡

type (default: "get")
类型:字符串
指定页面请求的时候使用的方法("get" 或者 "post")。只在changePage() 的 to 参数 是一个地址的时候可用。

加载一个外部页面,提高其内容,并将其插入到DOM。这种方法被称为内部的changepage()功能时,它的第一个参数是一个URL。这个函数不影响当前页面可以在后台加载页面。该函数返回一个对象,获取延期承诺在该页被增强,插入到文档中的解决。
加载“about/us.html”的页面到DOM

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery.mobile.loadPage demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 
 <div></div>
 
</div>
<script>
$.mobile.loadPage( "about/us.html" );
</script>
 
</body>
</html>

 

加载一个“searchresults.php”页,要发送的表单数据是“search”字符。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery.mobile.loadPage demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 
 <div></div>
 
</div>
<script>
$.mobile.loadPage( "searchresults.php", {
 type: "post",
 data: $( "form#search" ).serialize()
});
</script>
 
</body>
</html>
Javascript 相关文章推荐
javascript运行机制之this详细介绍
Feb 07 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
详解JavaScript逻辑And运算符
Dec 04 #Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 #Javascript
详解JavaScript逻辑Not运算符
Dec 04 #Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 #Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 #Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 #Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 #Javascript
You might like
NT IIS下用ODBC连接数据库
2006/10/09 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
项目实践之javascript技巧
2007/12/06 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
react-router实现按需加载
2017/05/09 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
js实现搜索栏效果
2018/11/16 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue 内联样式style中的background用法说明
2020/08/05 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
研究生考核个人自我鉴定
2014/03/27 职场文书
《分一分》教学反思
2014/04/13 职场文书
给校长的建议书500字
2014/05/15 职场文书
体育专业自荐书
2014/05/29 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python