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 相关文章推荐
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
React + webpack 环境配置的方法步骤
Sep 07 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
javascript遍历对象的五种方式实例代码
Oct 24 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP7新功能总结
2019/04/14 PHP
popdiv
2006/07/14 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python发布模块的步骤分享
2014/02/21 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
网络教育自我鉴定
2013/11/01 职场文书
信息技术教学反思
2014/02/12 职场文书
情人节寄语大全
2014/04/11 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
校园广播稿100字
2014/10/06 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
python not运算符的实例用法
2021/06/30 Python