Acara sentuh mudah alih jQuery
Peristiwa sentuhan dicetuskan apabila pengguna menyentuh skrin (halaman).
|
触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！ |
|---|
Klik Mudah Alih jQuery
Peristiwa klik dicetuskan apabila pengguna mengklik pada elemen.
Contoh berikut: apabila elemen <p> diklik, elemen <p>
Contoh
<!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("tap",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>tap 事件</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 "Jalankan Instance" untuk melihat contoh dalam talian
jQuery Mobile klik dan tahan (tekan lama)
Peristiwa klik dan tahan (tekan lama) dicetuskan selepas mengklik dan menahan (kira-kira satu saat)
Contoh
<!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("taphold",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>taphold 事件</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 "Jalankan Instance" untuk melihat contoh dalam talian
Slaid Mudah Alih jQuery
Peristiwa gelongsor ialah peristiwa yang dicetuskan apabila pengguna menyeret secara mendatar lebih daripada 30px atau kurang daripada 20px secara menegak dalam masa satu saat:
Contoh
<!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("swipe",function(){
$("span").text("滑动检测!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>swipe 事件</h1>
</div>
<div data-role="main" class="ui-content">
<p>在下面的文本或方框上滑动。</p>
<p style="border:1px solid black;height:200px;width:200px;"></p>
<p><span style="color:red"></span></p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
Jalankan instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
jQuery Mudah Alih Leret ke kiri
Acara kiri slaid dicetuskan apabila pengguna menyeret elemen ke kiri lebih besar daripada 30px:
Contoh
<!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("swipeleft",function(){
alert("您向左滑动!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>swipeleft 事件</h1>
</div>
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">向左滑动 - 不要超出边框！</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
Jalankan instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
jQuery Mudah Alih Leret ke kanan
Acara kanan slaid dicetuskan apabila pengguna menyeret elemen ke kanan lebih besar daripada 30px:
Contoh
<!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("swiperight",function(){
alert("向右滑动!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>swiperight 事件</h1>
</div>
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">向右滑动 - 不要超出边框！</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
Jalankan instance »
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
