jQuery.touchswipe插件

TouchSwipe一款专门为移动设备设计的jquery插件,用于监听单个和多个手指触摸等事件。

一、特点:

1、监听滑动的4个方向:上、下、左、右;

2、监听多个手指收缩还是外张;

3、支持单手指或双手指触摸事件;

4、支持单击事件touchSwipe对象和它的子对象;

5、可定义临界值和最大时间来判断手势的实际滑动;

6、滑动事件有4个触发点:“开始”,“移动”,“结束”和“取消”;

7、结束事件可以在触摸释放或是达到临界值时触发;

8、允许手指刷和页面滚屏;

9、可禁止用户通过输入元素(如:按钮、表单、文本框等)触发事件;

二、安装

1、NPM

npm install jquery-touchswipe --save

2、Bower

bower install jquery-touchswipe --save

3、将压缩文件添加到你的项目里

<script src="js/jquery.touchSwipe.min.js" type="text/javascript"></script>

4、使用

$(function() {
  $("#test").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount, fingerData)                     {
      $(this).text("You swiped " + direction );
    }
  });

  //Set some options later
  $("#test").swipe( {fingers:2} );
});

  

三、Methods(方法)

1、swipe:初始化

例子:$("#element").swipe({

//给id为element的容器触摸滑动监听事件

});

2、destroy:彻底销毁swipe插件,必须重新初始化插件才能再次使用任何方法

例子:$("#element").swipe("destroy");

3、disable:禁止插件,使插件失去作用

返回值:现在与插件绑定的DOM元素

例子:$("#element").swipe("disable");

4、enable:重新启用插件,恢复原有的配置

返回值:现在与插件绑定的DOM元素

例子:$("#element").swipe("enable");

5、option:设置或获取属性

例子:

$("#element").swipe("option", "threshold"); // 返回阈值

$("#element").swipe("option", "threshold", 100); // 设置阈值

$("#element").swipe("option", {threshold:100, fingers:3} ); // 设置多个属性

$("#element").swipe({threshold:100, fingers:3} ); // 设置多个属性 -"option"方法可省略

$("#element").swipe("option"); // 返回现有的options

四、Events事件

1、swipe:滑动事件

swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
			$(this).text("You swiped " + direction );
    		}

参数:

2、swipeDown:向下滑动事件

swipeDown: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

3、swipeUp:向上滑动事件

swipeUp: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

4、swipeLeft:向左滑动事件

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

5、swipeRight:向右滑动事件

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

6、swipeStatus:滑动过程会持续触发swipeStatus事件,不受阈值限制

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData, currentDirection) {

}

参数:

7、tap:当用户简单地点击或者轻击而不是滑动一个元素时tap/click事件将被触发

tap:function(event,target){

console.log($(target).attr("class"));

}

参数:

event:原生事件对象

target:被点击的元素(DOM对象)

8、doubleTap:当用户连续两次点击或者轻击而不是滑动一个元素时事件将被触发

doubleTap:function(event,target){

console.log($(target).attr("class"));

}

参数:

event:原生事件对象

target:被点击的元素(DOM对象)

时间: 2024-12-21 09:31:22

jQuery.touchswipe插件的相关文章

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后用JS来算出每页多高,按照每张纸的高度来进行适当的增减高度.(这种方式缺点就是只能针对单中类型的纸张,计算十分的繁琐,要些很多加减法 -_-);). 参考A4纸高度的网页:http://www.jb51.net/office/word/67360.html 2.在如上一个思路的方式,试着查找能不能自

jquery.cookie插件使用

jquery.cookie插件是一个在浏览器端对cookie进行操作的,使用非常方便. jquery.cookie中的操作: jquery.cookie.js插件:百度即可下载 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie. 创建一个持久cookie: $.cookie(‘cookieName’,'cookieValue’,{ex

jQuery验证插件

学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 一.使用 validate.js 插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是valida

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导

jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象 $('#myForm').ajaxForm(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); $('#myForm2').sub