jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)


Posted in Javascript onAugust 23, 2016

效果图

jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

第一步:加载

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>

第二步:html

<div class="item-wrap">
  <div class="item clearfix">
    <div class="img-item">
      <img src="images/icon.png">
    </div>
    <div class="txt-item">
      <p class="name">
         小黄人
      </p>
      <p class="txt">
        小黄人小黄人小黄人小黄人
      </p>
    </div>
    <i class="arrow"></i>
    <a class="delect-btn">删除</a>
  </div>
  <div class="item clearfix">
    <div class="img-item">
      <img src="images/icon.png">
    </div>
    <div class="txt-item">
      <p class="name">
         小黄人
      </p>
      <p class="txt">
        小黄人小黄人小黄人小黄人
      </p>
    </div>
    <i class="arrow"></i>
    <a class="delect-btn">删除</a>
  </div>
</div>

第二步:css

.item-wrap{
  overflow: hidden;
 }
 .item-wrap .item{
  border-bottom: 1px #fff solid;
  background: #000;
  width: 125%;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  -webkit-transition: all 0.3s linear;
 }
 .item-wrap .item .img-item{
  width: 50px; 
  height: 50px;
  margin: 10px;
 }
 .item-wrap .item .img-item img{
  width: 100%;
  border-radius: 50%;
 }
 .item-wrap .item .txt-item{
  padding-top: 10px;
  margin-right:25px;

  font-size: 14px;
  line-height: 24px;
  color: #fff;
  -webkit-box-flex:1;
 }
.item-wrap .item .arrow{
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 8px 0px 8px 8px;
  position: absolute;
  right: 22%;
  top: 50%;
  margin-top: -8px;
}
.delect-btn{
  width: 20%;
  margin-left: 15px;
  color: #fff;
  background: #0f0;
  z-index:999;
  display: block;
  text-align: center;
  padding-top: 5%;
}
.item-wrap .selected{
  -webkit-transform: translate(-16%);
  -webkit-transition: all 0.3s linear;
}

第二步:jq

<script>
  $(".item").on('swipeleft', function(event) {
    event.preventDefault();
    /* Act on the event */
    $(this).addClass('selected').siblings('.item').removeClass('selected');
    $(this).find('.delect-btn').on('click', function(event) {
      event.preventDefault();
      /* Act on the event */
      $(this).parent(".item").animate({
        height: 0,
        width: 0},
        300, function() {
        /* stuff to do after animation is complete */
        $(this).remove();
      });
    });
  });
  $(".item").on('swiperight', function(event) {
    event.preventDefault();
    /* Act on the event */
    $(this).removeClass('selected');
  });

</script>

以上这篇jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 #Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 #Javascript
JavaScript DOM节点操作方法总结
Aug 23 #Javascript
EasyUI创建对话框的两种方式
Aug 23 #Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python中防止sql注入的方法详解
2017/02/25 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
服装发布会策划方案
2014/05/22 职场文书
政风行风建设责任书
2014/07/23 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS