jQuery行動web開發之頁面跳轉與載入外部頁面的實作_jquery
- WBOY原創
- 2016-05-16 15:27:221509瀏覽
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>