Acara halaman mudah alih jQuery
Acara halaman mudah alih jQuery
Peristiwa yang berkaitan dengan halaman dalam jQuery Mobile dibahagikan kepada empat kategori:
Permulaan Halaman - dalam Sebelum halaman dibuat, apabila halaman dibuat, dan selepas halaman dimulakan
Muat Halaman / Nyahmuat - apabila halaman luaran dimuatkan, dipunggah atau gagal
Peralihan Halaman - sebelum dan selepas peralihan halaman
Perubahan Halaman - apabila halaman diubah, atau gagal
Untuk maklumat lengkap tentang semua acara Mudah Alih jQuery, lawati Rujukan Acara Mudah Alih jQuery kami.
Acara Permulaan Mudah Alih jQuery
Apabila halaman biasa dalam jQuery Mobile dimulakan, ia melalui tiga peringkat:
Sebelum penciptaan halaman
Penciptaan halaman
Pengamatan halaman
Dicetuskan oleh setiap peringkat Acara boleh digunakan untuk memasukkan atau memanipulasi kod.
| 事件 | 描述 |
|---|---|
| pagebeforecreate | 当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。 |
| pagecreate | 当页面已创建，但增强完成之前，触发该事件。 |
| pageinit | 当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。 |
Contoh berikut menunjukkan apabila setiap peristiwa dicetuskan apabila mencipta halaman dalam jQuery Mobile:
Instance
<!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>Jalankan instance»
Klik butang "Run instance" untuk melihat contoh dalam talian
jQuery Mobile Load event
Acara pemuatan halaman kepunyaan halaman luaran.
Setiap kali halaman luaran memuatkan DOM, dua acara akan dicetuskan. Yang pertama ialah pagebeforeload, yang kedua ialah pageload (berjaya) atau pageloadfailed (gagal).
Peristiwa ini dijelaskan dalam jadual di bawah:
| 事件 | 描述 |
|---|---|
| pagebeforeload | 在任何页面加载请求作出之前触发。 |
| pageload | 在页面已成功加载并插入 DOM 后触发。 |
| pageloadfailed | 如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。 |
Yang berikut menunjukkan cara pemuatan halaman dan acara gagal pagload berfungsi:
Instance
<!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>Run Instance»
Klik Butang " Jalankan Contoh" untuk melihat tika dalam talian
Peristiwa Peralihan Mudah Alih jQuery
Kami juga boleh menggunakan acara apabila beralih dari satu halaman ke halaman seterusnya.
Peralihan halaman melibatkan dua halaman: halaman "akan" dan halaman "akan" - peralihan ini memindahkan halaman yang sedang aktif (halaman "akan") ke halaman baharu (halaman "akan" Halaman proses perubahan menjadi lebih dinamik. Instance»
| 事件 | 描述 |
|---|---|
| pagebeforeshow | 在"去的"页面触发，在过渡动画开始前。 |
| pageshow | 在"去的"页面触发，在过渡动画完成后。 |
| pagebeforehide | 在"来的"页面触发，在过渡动画开始前。 |
| pagehide | 在"来的"页面触发，在过渡动画完成后。 |
