jQuery Mobile 触摸事件实例


Posted in Javascript onJune 04, 2016

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

必须引入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>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Math对象
Aug 13 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
iview table高度动态设置方法
Mar 14 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 #Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 #Javascript
javacript获取当前屏幕大小
Jun 04 #Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 #Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 #Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 #Javascript
js不间断滚动的简单实现
Jun 03 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python破解同事的压缩包密码
2020/10/14 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
报关专员求职信范文
2014/02/22 职场文书
简单租房协议书
2014/10/21 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电