| 标题 | jQuery Mobile 触摸事件实例 |
| 范文 | 这篇文章主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。 触摸事件在用户触摸屏幕（页面）时触发。 必须引入jQuery库和jQuery Mobile库，如下： <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> 1.jQuery Mobile 点击 点击事件在用户点击元素时触发。 如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素： 代码如下: <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("tap",function(){ $(this).hide(); }); }); </script> <div data-role="main"> <p>敲击我，我会消失。</p> <p>敲击我，我会消失。</p> <p>敲击我，我也会消失。</p> </div> 2.jQuery Mobile 点击不放（长按） 点击不放（长按） 事件在点击并不放（大约一秒）后触发 代码如下: <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("taphold",function(){ $(this).hide(); }); }); </script> <div data-role="main"> <p>如果您敲击并保持一秒钟，我会消失。</p> <p>敲击并保持住，我会消失。</p> <p>敲击并保持住，我也会消失。</p> </div> 3.jQuery Mobile 滑动 滑动事件是在用户一秒内水平拖拽大于30PX，或者纵向拖曳小于20px的事件发生时触发的事件： 代码如下: <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("swipe",function(){ $("span").text("滑动检测!"); }); }); </script> <div data-role="main"> <p>在下面的文本或方框上滑动。</p> <p></p> <p><span></span></p> </div> 4.jQuery Mobile 向左滑动 向左滑动事件在用户向左拖动元素大于30px时触发： 代码如下: <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("swipeleft",function(){ alert("您向左滑动!"); }); }); </script> <div data-role="main"> <p>向左滑动 - 不要超出边框！</p> </div> 5.jQuery Mobile 向右滑动 向右滑动事件在用户向右拖动元素大于30px时触发： 代码如下: <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("swiperight",function(){ alert("向右滑动!"); }); }); </script> <div data-role="main"> <p>向右滑动 - 不要超出边框！</p> </div> 以上就是本文的全部内容，希望能给大家一个参考 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。