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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
基于datagrid框架的查询
Apr 08 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
解读Vue组件注册方式
May 15 Vue.js
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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
TypeScript 中接口详解
2015/06/19 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python中pycurl库的用法实例
2014/09/30 Python
Python入门教程之运算符与控制流
2016/08/17 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python登录系统界面实现详解
2019/06/25 Python
python pytest进阶之fixture详解
2019/06/27 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python3中数组逆序输出方法
2020/12/01 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
C语言笔试题回忆
2015/04/02 面试题
精彩的演讲稿开头
2014/05/08 职场文书
户籍证明格式
2014/09/15 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
婚礼答谢词
2015/01/04 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
小学体育课教学反思
2016/02/16 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
vue router 动态路由清除方式
2022/05/25 Vue.js
Android中View.post和Handler.post的关系
2022/06/05 Java/Android