Implémentation du saut de page et du chargement de pages externes dans jQuery mobile web development_jquery

changePage() saut de page

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

Pour passer d'une page à une autre, utilisez la méthode changePage de l'objet $.mobile. Mais pour utiliser cette méthode, vous devez cliquer sur un lien ou soumettre un formulaire. Cette méthode a deux paramètres.

À : C'est le premier paramètre, il est nécessaire et indispensable. Type : chaîne ou objet.

Chaîne : Adresse URL absolue ou relative. Par exemple : ("about/us.html")

Objet :
objet sélecteur jquery, tel que : ($("#about")).
Un tableau [from, to] qui spécifie deux références de page, utilisé pour accéder à une page connue. De est la page actuellement visible (ou $.mobile.activePage).
Objet pour envoyer des données de formulaire, telles que ({to : url, data : données de formulaire sérialisées, type : "get" ou "post"}.

options : C'est le deuxième paramètre et il est facultatif. Type : Objet

allowSamePageTransition (booléen, par défaut : false)
Par défaut, changePage() ignore les demandes d'accès à une page déjà active. Si cela est défini sur true, il sera exécuté. Les développeurs doivent noter que certaines transitions de page supposeront que la page source et la page cible dans une demande de passage à une page sont différentes, il n'y aura donc pas d'animation de transition.

changeHash (booléen, par défaut : vrai)
Détermine si le hachage de la barre d'adresse doit être mis à jour.

données (chaîne ou objet, par défaut : non défini)
Les données à envoyer via une requête ajax ne sont disponibles que lorsque le paramètre to de changePage() est une adresse.

dataUrl (String, par défaut : non défini)
L'adresse URL de l'adresse du navigateur est mise à jour lorsque la conversion de la page est terminée. Si elle n’est pas spécifiée, la valeur de l’attribut data-url de la page est utilisée.

pageContainer (sélecteur jQuery, par défaut : $.mobile.pageContainer) spécifie le conteneur qui doit contenir la page.

reloadPage (booléen, par défaut : false)
Forcer l'actualisation de la page, même lorsque l'élément DOM dans le conteneur de page est prêt. Disponible uniquement lorsque le paramètre to de changePage() est une adresse.

reverse (booléen, par défaut : faux)
Définissez la direction de l'animation de transition de page. Lorsqu'elle est définie sur true, elle provoquera la transition dans la direction opposée.

rôle (chaîne, par défaut : non défini)
Utilisez la valeur data-role lors de l’affichage de la page. Par défaut, ce paramètre n'est pas défini, ce qui signifie qu'il dépend de l'attribut @data-role de l'élément.

showLoadMsg (valeur booléenne, par défaut : true) Définissez s'il faut afficher les informations de chargement lors du chargement de pages externes.

transition (String, par défaut : $.mobile.defaultPageTransition) Transition lors de l'utilisation de la page affichée.

type (chaîne, par défaut : get)
Spécifiez la méthode utilisée lors de la demande de la page ("get" ou "post"). Disponible uniquement lorsque le paramètre to de changePage() est une adresse.

//以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() charge la page externe

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>