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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
生成二维码方法汇总
Dec 26 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
vue 清空input标签 中file的值操作
Jul 21 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程序
2012/02/04 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
es6函数之rest参数用法实例分析
2020/04/18 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
Python中的localtime()方法使用详解
2015/05/22 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python while循环使用else语句代码实例
2020/02/07 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
入党积极分子介绍信
2014/01/17 职场文书
电钳工人个人求职信
2014/05/10 职场文书
给校长的建议书300字
2014/05/16 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
windows系统安装配置nginx环境
2022/06/28 Servers