acara mudah alih jQuery
acara = tindakan tindak balas untuk semua pelawat berbeza ke halaman.
Acara Mudah Alih jQuery
Dalam jQuery Mobile anda boleh menggunakan sebarang acara jQuery standard.
Selain itu, jQuery Mobile juga menyediakan acara untuk penyemak imbas mudah alih:
Acara sentuh - tercetus apabila pengguna menyentuh skrin
Acara leret - dicetuskan apabila pengguna meluncur ke atas atau ke bawah
Acara kedudukan - tercetus apabila peranti dibalikkan secara mendatar atau menegak
Halaman peristiwa - dicetuskan apabila halaman dipaparkan, disembunyikan, dicipta, dimuatkan atau tidak dimuatkan
Mulakan acara Mudah Alih jQuery
Kami belajar semasa mempelajari Penggunaan jQuery $( document).ready() untuk menyebabkan skrip kod jQuery anda mula dilaksanakan selepas elemen DOM dimuatkan:
Instance
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</body>
</html>Run Instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Walau bagaimanapun, dalam jQuery Mobile, gunakan acara pageinit untuk menetapkan skrip kod untuk bermula selepas elemen DOM adalah dimuatkan. Pelaksanaan, jadi untuk memuatkan dan mencipta skrip yang dilaksanakan pada mana-mana halaman baharu, anda perlu mengikat acara pageinit.
Parameter kedua ("#pageone") ialah id halaman acara yang ditentukan:
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("pagecreate","#pageone",function(){
$("p").on("click",function(){
$(this).hide();
});
});
</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>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
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("pagecreate","#pageone",function(){
$("p").on("click",function(){
$(this).hide();
});
});
</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>
<p>点击我，我会消失。</p>
<p>点击我，我也会消失。</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
| Nota: Kaedah jQuery on() digunakan untuk mengikat peristiwa pada elemen yang dipilih. |
|---|
Kami akan memperkenalkan acara jQuery Mobile dengan lebih terperinci dalam bab seterusnya.
