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 相关文章推荐
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
Vue中的Props(不可变状态)
Sep 29 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
vue中引入mxGraph的步骤详解
May 17 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系统命令函数使用分析
2013/07/05 PHP
php共享内存段示例分享
2014/01/20 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
实时获取Python的print输出流方法
2019/01/07 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Django实现网页分页功能
2019/10/31 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
python中def是做什么的
2020/06/10 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
授权委托书怎么写
2014/04/03 职场文书
小学毕业演讲稿
2014/04/25 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
社区安全温馨提示语
2015/07/14 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL