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 DOM编程实例(智播客学习)
Nov 23 Javascript
js 动态选中下拉框
Nov 26 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
Javascript使用integrity属性进行安全验证
Nov 07 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
收音机的保养
2021/03/01 无线电
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
javascript 播放器 控制
2007/01/22 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
详解Python3定时器任务代码
2019/09/23 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
给校长的建议书200字
2014/05/16 职场文书
安全责任书模板
2014/07/22 职场文书
驻村工作先进事迹
2014/08/14 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
地道战观后感2000字
2015/06/04 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python