jQuery移动web开发之页面跳转和加载外部页面的实现
作者：bea
changePage() 页面跳转 jQuery.mobile.changePage( to [, options ] ) 从一个页面跳转到另一个页面，使用$.mobile对象的changePage方法来实现。但要使用此方式的时候，要以点击一个链接或者提交表单来实现。此方法有两个参数。 to：是第一个参数，是必须的，不可缺少。类型：字符串或者对象。 字符串: 绝对或相对URL地址。如：("about/us.html") 对象： jquery选择器对象，如：($("#a
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>
有用 | 无用
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>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 基于jQuey实现鼠标滑过变色(整行变色)
- js实现遍历含有input的table实例
- JavaScript中的return语句简单介绍
- 深入理解Java线程编程中的阻塞队列容器
- JS与jQuery遍历Table所有单元格内容的方法
- JavaScript的History API使搜索引擎抓取AJAX内容
- JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
- 小巧强大的jquery layer弹窗弹层插件
- 使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
- win7下安装配置node.js+express开发环境
- 分享使用AngularJS创建应用的5个框架
- 如何利用AngularJS打造一款简单Web应用
- 使用CDN和AJAX加速WordPress中jQuery的加载
- 浅析jQuery移动开发中内联按钮和分组按钮的编写
- 使用jQuery在移动页面上添加按钮和给按钮添加图标
- jQuery mobile类库使用时加载导航历史的方法简介
- jQuery mobile转换url地址及获取url中目录部分的方法
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- 使用jQuery mobile库检测url绝对地址和相对地址的方法