jQuery Mobile ページのイベント
jQuery Mobile でページを処理するイベントは、次の 4 つのカテゴリに分類されます:
ページの初期化 - ページの作成前、ページの作成時、ページの初期化後
ページのロード/アンロード - 外部ページがロード、アンロード、または失敗したとき
ページ遷移 - ページ遷移の前後
ページ変更 - ページが変更されたとき、または失敗したとき
すべての jQuery Mobile イベントの詳細については、jQuery Mobile イベント リファレンスを参照してください。
jQuery Mobile 初期化イベント
jQuery Mobile の一般的なページは、次の 3 つの段階を経ます:
イベント各ステージで起動されるコードを使用して、コードを挿入または操作できます。
Event | Description |
pagebeforecreate | このイベントは、ページが初期化されようとするとき、および jQuery Mobile がページの拡張を開始する前に発生します。 |
pagecreate | このイベントは、ページが作成されたとき、拡張が完了する前にトリガーされます。 |
pageinit | このイベントは、ページが初期化されたとき、および jQuery Mobile によるページの拡張が完了した後に発生します。 |
次の例は、jQuery Mobile でページを作成するときに各イベントがいつトリガーされるかを示しています:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforecreate",function(){
alert("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});
$(document).on("pagecreate",function(){
alert("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>头部文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面已创建，并增强完成。</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
jQuery Mobile Load イベント
ページ読み込みイベントは外部ページに属します。
外部ページが DOM をロードするたびに、2 つのイベントがトリガーされます。 1 つ目は pagebeforeload、2 つ目は pageload (成功) または pageloadfailed (失敗) です。
これらのイベントについては、以下の表で説明します。
イベント | 説明 |
pagebeforeload | ページの読み込みリクエストが行われる前に発生します。 |
pageload | ページが正常にロードされ、DOM に挿入された後に発生します。 |
pageloadfailed | このイベントは、ページ読み込みリクエストが失敗した場合にトリガーされます。デフォルトでは、「ページの読み込みエラー」メッセージが表示されます。 |
以下は、pageload および pagloadfailed イベントがどのように機能するかを示しています:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecontainerload",function(event,data){
alert("pagecontainerload 事件触发!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<a href="externalpage.html">外部页面</a>
<br><br>
<a href="externalnotexist.html">外部页面不存在</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックしてください
jQuery モバイル移行イベント
また、あるページから次のページに遷移するときにイベントを使用することでオンライン インスタンスを表示することもできます。
ページ遷移には、「次の」ページと「次の」ページの 2 つのページが含まれます。これらの遷移により、現在アクティブなページ (「次の」ページ) が新しいページ (「次の」ページ) に変更され、より動的になります。
| イベント | 説明 |
|---|
| pagebeforeshow | は、遷移アニメーションが開始される前に、「coming」ページでトリガーされます。遷移アニメーションが開始される前に、遷移アニメーションが完了した後、 |
ページで | がトリガーされます。 |
インスタンス | <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforeshow","#pagetwo",function(){
alert("触发 pagebeforeshow 事件 - 页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){
alert("触发 pageshow 事件 - 现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){
alert("触发 pagebeforehide 事件 - 页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){
alert("触发 pagehide 事件 - 现在隐藏页面二");
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面一</p>
<a href="#pagetwo">转到页面二</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面二</p>
<a href="#pageone">转到页面一</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html> |
インスタンスの実行»| 「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します | |
