jQuery でのページジャンプと外部ページの読み込みの実装モバイル Web 開発

jQuery でのページジャンプと外部ページの読み込みの実装モバイル Web 開発_jquery

WBOY

リリース： 2016-05-16 15:27:22

オリジナル

1498 人が閲覧しました

changePage() ページジャンプ

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

ログイン後にコピー

あるページから別のページにジャンプするには、$.mobile オブジェクトのchangePage メソッドを使用します。ただし、この方法を使用するには、リンクをクリックするか、フォームを送信する必要があります。このメソッドには 2 つのパラメータがあります。

to: これは最初のパラメータであり、必要かつ不可欠です。タイプ: 文字列またはオブジェクト。

文字列: 絶対または相対 URL アドレス。例: ("about/us.html")

オブジェクト:
jquery セレクターオブジェクト ($("#about")) など。
2 つのページ参照を指定する配列 [from, to] は、既知のページ (または $.mobile.activePage) にジャンプするために使用されます。
フォームデータを送信するオブジェクト ({to: url、data: シリアル化されたフォームデータ、type: "get" または "post"} など)。

options: これは 2 番目のパラメータであり、オプションです。タイプ: オブジェクト

allowSamePageTransition (ブール値、デフォルト: false)
デフォルトでは、changePage() は、すでにアクティブなページにジャンプするリクエストを無視します。これを true に設定すると、実行されます。開発者は、一部のページ遷移では、ページにジャンプするリクエストのソースページとターゲットページが異なると想定するため、遷移アニメーションが存在しないことに注意してください。

changeHash (ブール値、デフォルト: true)
アドレスバーのハッシュを更新するかどうかを決定します。

データ (文字列またはオブジェクト、デフォルト: 未定義)
ajax リクエスト経由で送信されるデータは、changePage() の to パラメーターがアドレスの場合にのみ使用できます。

dataUrl (文字列、デフォルト: 未定義)
ページ変換が完了するとブラウザアドレスのURLアドレスが更新されます。指定しない場合は、ページの data-url 属性値が使用されます。

pageContainer (jQuery セレクター、デフォルト: $.mobile.pageContainer) は、ページを含めるコンテナーを指定します。

reloadPage (ブール値、デフォルト: false)
ページコンテナー内の DOM 要素の準備ができている場合でも、ページを強制的に更新します。 changePage() の to パラメータがアドレスの場合にのみ使用できます。

反転 (ブール値、デフォルト: false)
ページ遷移アニメーションの方向を設定します。 true に設定すると、逆方向に遷移します。

ロール (文字列、デフォルト: 未定義)
ページを表示するときに data-role 値を使用します。デフォルトでは、このパラメータは未定義です。つまり、要素の @data-role 属性に依存します。

showLoadMsg (ブール値、デフォルト: true) 外部ページをロードするときにロード情報を表示するかどうかを設定します。

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>

ログイン後にコピー