Implementierung von Seitensprüngen und Laden externer Seiten in jQuery mobile web development_jquery

changePage() Seitensprung

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

Um von einer Seite zur anderen zu springen, verwenden Sie die changePage-Methode des $.mobile-Objekts. Um diese Methode nutzen zu können, müssen Sie jedoch auf einen Link klicken oder ein Formular absenden. Diese Methode hat zwei Parameter.

zu: Es ist der erste Parameter, er ist notwendig und unverzichtbar. Typ: Zeichenfolge oder Objekt.

String: Absolute oder relative URL-Adresse. Zum Beispiel: („about/us.html“)

Objekt:
jquery-Selektorobjekt, wie zum Beispiel: ($("#about")).
Ein Array [von, bis], das zwei Seitenverweise angibt, die zum Springen zu einer bekannten Seite verwendet werden. Von ist die aktuell sichtbare Seite (oder $.mobile.activePage).
Objekt zum Senden von Formulardaten, z. B. ({to: url, data: serialized form data, type: „get“ or „post“}.

Optionen: Dies ist der zweite Parameter und optional. Typ: Objekt

allowSamePageTransition (boolean, Standard: false)
Standardmäßig ignoriert changePage() Anfragen, zu einer bereits aktiven Seite zu springen. Wenn dies auf true gesetzt ist, wird es ausgeführt. Entwickler sollten beachten, dass bei einigen Seitenübergängen davon ausgegangen wird, dass die Quellseite und die Zielseite in einer Anfrage zum Springen zu einer Seite unterschiedlich sind, sodass keine Übergangsanimation erfolgt.

changeHash (boolean, Standard: true)
Bestimmt, ob der Adressleisten-Hash aktualisiert werden soll.

Daten (Zeichenfolge oder Objekt, Standard: undefiniert)
Die per Ajax-Anfrage zu sendenden Daten sind nur verfügbar, wenn der to-Parameter von changePage() eine Adresse ist.

dataUrl (String, Standard: undefiniert)
Die URL-Adresse der Browseradresse wird aktualisiert, wenn die Seitenkonvertierung abgeschlossen ist. Wenn nicht angegeben, wird der data-url-Attributwert der Seite verwendet.

pageContainer (jQuery-Selektor, Standard: $.mobile.pageContainer) gibt den Container an, der die Seite enthalten soll.

reloadPage (boolean, Standard: false)
Erzwingen Sie die Aktualisierung der Seite, auch wenn das DOM-Element im Seitencontainer bereit ist. Nur verfügbar, wenn der to-Parameter von changePage() eine Adresse ist.

reverse (boolean, Standard: false)
Legen Sie die Richtung der Seitenübergangsanimation fest. Wenn diese auf „true“ gesetzt ist, erfolgt der Übergang in die entgegengesetzte Richtung.

Rolle (Zeichenfolge, Standard: undefiniert)
Verwenden Sie den Datenrollenwert, wenn Sie die Seite anzeigen. Standardmäßig ist dieser Parameter undefiniert, d. h. er hängt vom @data-role-Attribut des Elements ab.

showLoadMsg (Boolescher Wert, Standard: true) Legen Sie fest, ob beim Laden externer Seiten Ladeinformationen angezeigt werden sollen.

transition (String, Standard: $.mobile.defaultPageTransition) Übergang bei Verwendung der angezeigten Seite.

Typ (Zeichenfolge, Standard: get)
Geben Sie die Methode an, die beim Anfordern der Seite verwendet wird („get“ oder „post“). Nur verfügbar, wenn der to-Parameter von changePage() eine Adresse ist.

//以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() lädt externe Seite

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>