这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
下面小编就为大家带来一篇 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 实现左滑显示删除按钮, 点击删除实现删除数据功能 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0714/332399.html