使用jQuery怎么实现一个左滑删除按钮-创新互联
本篇文章给大家分享的是有关使用jQuery怎么实现一个左滑删除按钮,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务枣庄,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220实现思路
为了说明我的实现思路,做了两个图来辅助说明。
首先,请看图1。在图中,我们设置每一行的宽度超过浏览器的宽度,其超出的部分就是放置按钮的区域。由于超出了浏览器的大宽度,因此按钮区域此时是不可见的,只能显示左侧的常规信息部分。
图1 普通状态
接下来,我们监听左侧常规信息区域,监听滑动事件(具体如何监听先不考虑)。当我们监听到左滑事件时,我们让相应行左偏移,让按钮显示出来,同时左侧超出的部分被遮挡(请看图2)。
图2 左滑状态
当我们右滑时,我们再让相应行回复到左偏移为0的时候就行了。
关键实现方式
对于左滑和右滑,我们通过设定常规信息区域的marin-left来实现,当设定margin-left为负值时,实现左滑,当再次设定margin-left为0时,实现右滑。
对于滑动事件监听,通过监听鼠标(手指)按下和抬起来实现,根据两点的X坐标的差值的正负判定是右滑还是左滑。
完整代码
需要注意的是,我在测试的时候用的是chrome的普通模式和mobile模拟器模式,发现两种模式下监听是不一样的,因此我写了两种监听,这样至少有一种会执行。也许有其他更好的适配方法,但不作为此处的重点。当然也欢迎大家赐教。
至于代码部分,用了jQuery,其实不用也没啥问题的,动画滑动和监听都可以用纯js写,但是由于这不是这里的重点,那么为什么不用jQuery呢?成功者站在巨人的肩膀上,而且咱也没有jQuery写的好 (。・`ω´・)
2015/11/13更新
有位同学提出说代码在QQ手机浏览器和Opera手机浏览器等中没有滑动效果,找了一下大概是帖子里说的原因,于是根据帖子里的提示以及那位同学的一个大神同学的提示,做了一下修改。主要是在touchmove事件中根据横纵坐标位移来判断是否阻止默认事件,如下:
// 横向位移大于纵向位移,阻止纵向滚动 if (Math.abs(delta.x) > Math.abs(delta.y)) { event.preventDefault(); }
2016/02/25更新
qq_25558115同学提到:“如果再能给大家提供出只能有一条记录可以左滑, 倘若滑动其他的记录,则有左滑记录的要回到原位”。于是进行了简单实现。主要思路如下:
// 用一个变量记录上一次左滑的对象 var lastLeftObj; // 在左滑发生的时候,判定上一个左滑的对象是否存在,若存在,且不是当前被左滑的对象,则将其右滑 // 同时,记录新的左滑对象 // 在右滑发生时,将上一个左滑对象清空 if (左滑) { pressedObj左滑 lastLeftObj && lastLeftObj != pressedObj && lastLeftObj右滑 lastLeftObj = pressedObj; // 记录上一个左滑的对象 } else if (右滑) { pressedObj右滑 lastLeftObj = null; // 清空上一个左滑的对象 }
2016/09/06更新
根据马灿发同学提出的bug进行修改:
右滑时进行判断,仅当要右滑的对象(pressedObj)是上一次左滑的对象(lastLeftObj)时才将对象右滑并清空lastLeftObj。
if (pressedObj == lastLeftObj) {...}
根据girlyougo同学的提议,添加“在除本行外的其他区域点击时均复位当前左滑按钮”的功能。思路为在滑动结束时,判定pressedObj!=lastLeftObj,即可知点击/滑动的对象为其他对象:
// 点击除当前左滑对象之外的任意其他位置 if (lastLeftObj && pressedObj != lastLeftObj) { $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一个左滑的对象 }
实际上,在添加了上述功能之后,前面提到的bug不存在了。不过此处保留了消除bug的那部分代码。
更新后的完整代码如下:
左划出现删除按钮,右滑隐藏 蜡笔小新在同行的小伙伴中提到了你1分钟前乔巴你看不到我哦1分钟前贱行贱远回忆里想起模糊的小时候,云朵漂浮在蓝蓝的天空,那时的你说,要和我手牵手,一起走到时间的尽头1分钟前小黄人哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……1分钟前
以上就是使用jQuery怎么实现一个左滑删除按钮,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页标题:使用jQuery怎么实现一个左滑删除按钮-创新互联
URL分享:http://azwzsj.com/article/pcdjp.html