利用jquery.mobile的swipeleft开发左右滑动功能

先看看效果：这是一个收货地址列表，想做出类似京东那样的，向左拖动显示删除。

用手向左拖动后，显示出删除。向右拖动，恢复到上图的样子。

为了实现以上功能需要引用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%;}

.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用来定义滑动事件。向左滑动后， updiv这层向左移动到-50px。向右移动到0px
第二个javascript用来定义 bdiv（红底带删除）的高。主要是收货地址长度不一，导致 updiv层的高不定。
为了让 updiv层和 bdiv层高度一致，在页面加载后获得 updiv层的高度，把这个高度赋给 bdiv层。