Pelaksanaan lompat halaman dan memuatkan halaman luaran dalam jQuery web mudah alih development_jquery

changePage() lompat halaman

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

Untuk melompat dari satu halaman ke halaman lain, gunakan kaedah changePage objek $.mobile. Tetapi untuk menggunakan kaedah ini, anda perlu mengklik pautan atau menghantar borang. Kaedah ini mempunyai dua parameter.

kepada: Ia adalah parameter pertama, ia adalah perlu dan amat diperlukan. Jenis: rentetan atau objek.

String: Alamat URL mutlak atau relatif. Contohnya: ("about/us.html")

Objek:
objek pemilih jquery, seperti: ($("#about")).
Tatasusunan [dari, kepada] yang menentukan dua rujukan halaman, yang digunakan untuk melompat ke halaman yang diketahui Daripada ialah halaman yang boleh dilihat pada masa ini (atau $.mobile.activePage).
Objek untuk menghantar data borang, seperti ({kepada: url, data: data borang bersiri, taip: "get" atau "post"}.

pilihan: Ia adalah parameter kedua dan adalah pilihan. Jenis: Objek

allowSamePageTransition (boolean, lalai: false)
Secara lalai, changePage() mengabaikan permintaan untuk melompat ke halaman yang sudah aktif. Jika ini ditetapkan kepada benar, ia akan dilaksanakan. Pembangun harus ambil perhatian bahawa beberapa peralihan halaman akan menganggap bahawa halaman sumber dan halaman sasaran dalam permintaan untuk melompat ke halaman adalah berbeza, jadi tidak akan ada animasi peralihan.

changeHash (boolean, lalai: benar)
Menentukan sama ada cincangan bar alamat perlu dikemas kini.

data (rentetan atau objek, lalai: tidak ditentukan)
Data yang akan dihantar melalui permintaan ajax hanya tersedia apabila parameter to changePage() ialah alamat.

dataUrl (String, lalai: undefined)
Alamat URL alamat penyemak imbas dikemas kini apabila penukaran halaman selesai. Jika tidak dinyatakan, nilai atribut url data halaman digunakan.

pageContainer (pemilih jQuery, lalai: $.mobile.pageContainer) menentukan bekas yang sepatutnya mengandungi halaman.

muat semulaHalaman (boolean, lalai: palsu)
Paksa muat semula halaman, walaupun apabila elemen DOM dalam bekas halaman sudah sedia. Hanya tersedia apabila parameter to changePage() ialah alamat.

terbalik (boolean, lalai: palsu)
Tetapkan arah animasi peralihan halaman Apabila ditetapkan kepada benar, ia akan menyebabkan peralihan ke arah yang bertentangan.

peranan (rentetan, lalai: tidak ditentukan)
Gunakan nilai peranan data apabila memaparkan halaman. Secara lalai parameter ini tidak ditentukan, bermakna ia bergantung pada atribut @data-role elemen.

showLoadMsg (Nilai Boolean, lalai: benar) Tetapkan sama ada untuk memaparkan maklumat pemuatan semasa memuatkan halaman luaran.

peralihan (String, lalai: $.mobile.defaultPageTransition) Peralihan apabila menggunakan halaman yang dipaparkan.

taip (rentetan, lalai: dapatkan)
Nyatakan kaedah yang digunakan semasa meminta halaman ("dapatkan" atau "siarkan"). Hanya tersedia apabila parameter to changePage() ialah alamat.

//以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() memuatkan halaman luaran

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>