Événements tactiles jQuery Mobile
Les événements tactiles sont déclenchés lorsque l'utilisateur touche l'écran (page).
|
触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！ |
|---|
jQuery Mobile Clic
Les événements de clic sont déclenchés lorsque l'utilisateur clique sur un élément.
L'exemple suivant : lorsque l'on clique sur l'élément <p>, l'élément <p>
Exemple
<!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>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
jQuery Mobile cliquez et maintenez (appui long)
L'événement Cliquer et maintenir (appui long) est déclenché après avoir cliqué et maintenu (environ une seconde)
Exemple
<!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>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Diapositive mobile jQuery
L'événement de glissement est un événement déclenché lorsque l'utilisateur fait glisser horizontalement plus de 30 px ou verticalement moins de 20 px en une seconde :
Exemple
<!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>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
jQuery Mobile Balayez vers la gauche
L'événement slide left est déclenché lorsque l'utilisateur fait glisser un élément vers la gauche d'une taille supérieure à 30px :
Exemple
<!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>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
jQuery Mobile Balayez vers la droite
L'événement slide right est déclenché lorsque l'utilisateur fait glisser un élément vers la droite d'une taille supérieure à 30px :
Exemple
<!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>
Exécuter l'instance »
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
