jQuery Mobile 触摸事件实例_jquery

触摸事件在用户触摸屏幕(页面)时触发。

必须引入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" class="ui-content">
  <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" class="ui-content">
  <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" class="ui-content">
  <p>在下面的文本或方框上滑动。</p>
  <p style="border:1px solid black;height:200px;width:200px;"></p>
  <p><span style="color:red"></span></p>
</div>

4.jQuery Mobile 向左滑动

向左滑动事件在用户向左拖动元素大于30px时触发:

复制代码 代码如下:

<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("swipeleft",function(){
    alert("您向左滑动!");
  });                      
});
</script>
<div data-role="main" class="ui-content">
  <p style="border:1px solid black;margin:5px;">向左滑动 - 不要超出边框!</p>
</div>

5.jQuery Mobile 向右滑动

向右滑动事件在用户向右拖动元素大于30px时触发:

复制代码 代码如下:

<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("swiperight",function(){
    alert("向右滑动!");
  });                      
});
</script>
<div data-role="main" class="ui-content">
  <p style="border:1px solid black;margin:5px;">向右滑动 - 不要超出边框!</p> 
</div>

时间: 2024-12-31 23:46:00

jQuery Mobile 触摸事件实例_jquery的相关文章

jquery $(&quot;form&quot;).submit事件实例

jquery $("form").submit事件实例 判断是否为提交了 <html>   <head>     <script type="text/网页特效" src="js/jquery-1.3.2.js"></script>     <script type="text/javascript">         $(document).ready(functi

jQuery级联操作绑定事件实例_jquery

级联操作绑定事件是jQuery非常具有实用价值的一个技巧,本文即以实例形式实现这一功能.分享给大家供大家参考之用.具体方法如下: 本文所述实例主要实现jQuery操作一个列表,根据类别选出学校,点击学校出现院系,点击院系出现专业,然后链接至专业申请页面. 具体功能代码如下: $("li.university").click(function(){ var id = $(this).attr("rel"); $.get("data.aspx?type=u&a

jquery 多个radio的click事件实例_jquery

如下所示: <div id="ImgRadio" style="float: left; width: 300px;"> <input type="radio" value="80*80" id="size1" name="size" checked="checked" />80*80 <input type="radio&qu

jQuery表单事件实例代码分享_jquery

本文实例为大家分享了jQuery表单事件代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单事件</title> </head> <style type="text/css" rel="stylesheet">

jQuery mobile 移动web(6)_jquery

jquery mobile 针对移动端设备的事件类型.   1.touch 事件.   tap 快速触摸屏幕并且离开,类似一种完整的点击操作.   taphold 触摸屏幕并保持一段时间.   swipe 在1秒内水平移动30px屏幕像素上时触发.   swipeleft 向左侧滑动   swiperight 像右侧滑动.   2.方向改变事件   orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,   该参数

jQuery.holdReady()方法用法实例_jquery

本文实例讲述了jQuery.holdReady()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以暂停或者恢复jQuery.ready()事件.调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法. 可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件,当满足一定条件时,再通过将此方法的参数设置为false,一一解除延迟.方法一般用于动态脚本加载,知道脚本加载完成然后再通过将此方法的参数设置为

jquery mobile开发常见问题分析_jquery

本文实例分析了jquery mobile开发常见问题.分享给大家供大家参考,具体如下: jquery mobile功能很强大,有了它,不用在程序中,写方法去判断,是什么手机了,完全可以用js来实现各种智能手机的的兼容性.也是因为功能强大,jquery mobile插件,200多K,min也有140多K. 1.jquery mobile是通过ajax来进行页面请求,ajax大家都知道,是不涮新页面的.也就是说地址栏的变动也不是真实的涮新.这样就有问题了,js只有刷新页面的时候才会执行,起作用,页面

jQuery自定义滚动条完整实例_jquery

本文实例讲述了jQuery自定义滚动条实现方法.分享给大家供大家参考,具体如下: 很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个demo 运行效果截图如下: 以下是代码部分: <html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(

jquery mobile 移动web(5)_jquery

有序列表 <div data-role="content"> <ol data-role="listview" data-theme="g"> <li><a href="#"> List 1</a></li> <li><a href="#"> List 2</a></li> <li&