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实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
mac下安装nginx和php
2013/11/04 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
Nodejs处理异常操作示例
2018/12/25 NodeJs
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中的yield使用方法
2014/02/11 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
AJAX的全称是什么
2012/11/06 面试题
迎八一活动主题
2014/01/31 职场文书
户外拓展训练感想
2015/08/07 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
python画条形图的具体代码
2022/04/20 Python