先看看效果:这是一个收货地址列表,想做出类似京东那样的,向左拖动显示删除。
用手向左拖动后,显示出删除。向右拖动,恢复到上图的样子。
为了实现以上功能需要引用jquery和jquery.mobile
<script src="/js/jquery.min.js" type="text/javascript">
<script src="/js/mobile/jquery.mobile-1.4.2.min.js">
<link href="/js/mobile/jquery.mobile-1.4.2.min.css" rel="stylesheet">
html代码:
<ul id="list">
<li class="address" >
<div class="updiv" >
<a href="" class="disH">
<span class="ico1 fl Mr10"></span>
<span class="ui_right fl">北京市市辖区崇文区 花园路3号<br> 张三1,13911009898 </span>
</a>
<a href="" class="ico3 fr"></a><div class="clear"></div>
</div>
<div class="bdiv"><a href=""> <span class="despan" >删除</span></a></div>
</li>
<li class="address" >
<div class="updiv" >
<a href="" class="disH">
<span class="ico2 fl Mr10"></span>
<span class="ui_right fl"> 天津市市辖区和平区 默默街1号2楼<br> 李四,18610278433</span>
</a>
<a href="" class="ico3 fr"></a><div class="clear"></div>
</div>
<div class="bdiv"><a href=""> <span class="despan" >删除</span></a></div>
</li>
<li class="address" >
<div class="updiv" >
<a href="" class="disH">
<span class="ico2 fl Mr10"></span>
<span class="ui_right fl">北京市市辖区西城区 hello街1号<br>王武,13661371199</span>
</a>
<a href="" class="ico3 fr"></a><div class="clear"></div>
</div>
<div class="bdiv"><a href=""> <span class="despan" >删除</span></a></div>
</li>
</ul>
主要是定义了两层 :一个是“updiv“,用来显示地址,底色是灰色的.另一个是”bdiv“,用来显示删除,为红色。bdiv在没有滑动时是被 updiv盖住的。
看一下css:定义了各层的颜色,及位置。.updiv,.bdiv的位置都是在0,0
.updiv,.bdiv{position:absolute;top:0;left:0;width: 100%;}
第一个javascript用来定义滑动事件。向左滑动后, updiv这层向左移动到-50px。向右移动到0px
第二个javascript用来定义 bdiv(红底带删除)的高。主要是收货地址长度不一,导致 updiv层的高不定。
为了让 updiv层和 bdiv层高度一致,在页面加载后获得 updiv层的高度,把这个高度赋给 bdiv层。
html代码:
<ul id="list">
<li class="address" >
<div class="updiv" >
<a href="" class="disH">
<span class="ico1 fl Mr10"></span>
<span class="ui_right fl">北京市市辖区崇文区 花园路3号<br> 张三1,13911009898 </span>
</a>
<a href="" class="ico3 fr"></a><div class="clear"></div>
</div>
<div class="bdiv"><a href=""> <span class="despan" >删除</span></a></div>
</li>
<li class="address" >
<div class="updiv" >
<a href="" class="disH">
<span class="ico2 fl Mr10"></span>
<span class="ui_right fl"> 天津市市辖区和平区 默默街1号2楼<br> 李四,18610278433</span>
</a>
<a href="" class="ico3 fr"></a><div class="clear"></div>
</div>
<div class="bdiv"><a href=""> <span class="despan" >删除</span></a></div>
</li>
<li class="address" >
<div class="updiv" >
<a href="" class="disH">
<span class="ico2 fl Mr10"></span>
<span class="ui_right fl">北京市市辖区西城区 hello街1号<br>王武,13661371199</span>
</a>
<a href="" class="ico3 fr"></a><div class="clear"></div>
</div>
<div class="bdiv"><a href=""> <span class="despan" >删除</span></a></div>
</li>
</ul>
主要是定义了两层 :一个是“updiv“,用来显示地址,底色是灰色的.另一个是”bdiv“,用来显示删除,为红色。bdiv在没有滑动时是被 updiv盖住的。
看一下css:定义了各层的颜色,及位置。.updiv,.bdiv的位置都是在0,0
.updiv,.bdiv{position:absolute;top:0;left:0;width: 100%;}
.updiv{z-index: 1;-webkit-transition: all ease .5s;padding:0 !important;background: none repeat scroll 0 0 #F9F9F9;}
.bdiv{background-color: red;z-index:0;text-align: right;}
.bdiv a{color:#fff !important;font-weight:normal !important;display:inline-block;width:100%;height:100%;text-align: right;}
javascript:
$(function(){
$(".updiv").bind("swipeleft",function(){
this.style.left = -50+"px";
});
$(".updiv").bind("swiperight",function(){
this.style.left = 0+"px";
});
});
$(window).load(function () {
$("#list li").each(function(){
var h = $(this).find('.updiv').height();
$(this).find('.despan').height(h-8);
$(this).height(h);
});
});
javascript:
$(function(){
$(".updiv").bind("swipeleft",function(){
this.style.left = -50+"px";
});
$(".updiv").bind("swiperight",function(){
this.style.left = 0+"px";
});
});
$(window).load(function () {
$("#list li").each(function(){
var h = $(this).find('.updiv').height();
$(this).find('.despan').height(h-8);
$(this).height(h);
});
});
第一个javascript用来定义滑动事件。向左滑动后, updiv这层向左移动到-50px。向右移动到0px
第二个javascript用来定义 bdiv(红底带删除)的高。主要是收货地址长度不一,导致 updiv层的高不定。
为了让 updiv层和 bdiv层高度一致,在页面加载后获得 updiv层的高度,把这个高度赋给 bdiv层。