jQuery行動web開發之頁面跳轉與載入外部頁面的實作

首頁

web前端

js教程

jQuery行動web開發之頁面跳轉與載入外部頁面的實作_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

jquery移動跳轉

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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。