good del opt

@@ -10,14 +10,29 @@ var $ = require('yoho.zepto'),
 
 var chosePanel = require('./chose-panel');
 
+function docTouchEvt(e) {
+    var $tar = $(e.target);
+
+    if ($tar.closest('.opt-panel').length === 0) {
+        $('.opt-panel:not(.hide)').addClass('hide');
+
+        //
+        $(document).unbind('touchstart', docTouchEvt);
+    }
+}
+
+// function unbindDocTouchEvt(e) {
+//     $(document).unbind('touchstart', docTouchEvt);
+// }
+
 ellipsis.init();
 
 lazyLoad($('.lazy'));
 
 $('.name')[0].mlellipsis(2);
 
-//checkbox toggle status
-$('.checkbox').bind('touchstart', function() {
+//TIP:事件委托在.cart-goods，商品列表的容器统一需要有.cart-goods
+$('.cart-goods').delegate('.checkbox', 'touchstart', function() {
     var $this = $(this);
 
     if ($this.hasClass('icon-cb-checked')) {
@@ -25,9 +40,7 @@ $('.checkbox').bind('touchstart', function() {
     } else {
         $this.removeClass('icon-checkbox').addClass('icon-cb-checked');
     }
-});
-
-$('.icon-edit').bind('touchstart', function() {
+}).delegate('.icon-edit', 'touchstart', function() {
     var id = $(this).closest('.shopping-cart-good').data('id');
 
     $.ajax({
@@ -42,5 +55,9 @@ $('.icon-edit').bind('touchstart', function() {
             }
         }
     });
+}).delegate('.icon-del', 'touchstart', function() {
+    $(this).closest('.shopping-cart-good').children('.opt-panel').removeClass('hide');
+
+    $(document).bind('touchstart', docTouchEvt);
 });
 

@@ -105,19 +105,38 @@
     }
 
     .opt-panel {
-        display: none;
-
+        position: absolute;
         width: 220rem / $pxConvertRem;
         height: 190rem / $pxConvertRem;
+        right: 0;
 
         color: #fff;
 
+        > div {
+            float: left;
+            box-sizing: border-box;
+            width: 110rem / $pxConvertRem;
+            height: 100%;
+            text-align: center;
+            padding: 40rem / $pxConvertRem 20rem / $pxConvertRem 0;
+            font-size: 15px;
+        }
+
+        span {
+            display: block;
+        }
+
         .put-in-favorite {
             background: #bbb;
+
         }
 
         .del {
             background: #999;
+
+            .iconfont {
+                margin-bottom: 20rem / $pxConvertRem;
+            }
         }
     }
 }
\ No newline at end of file

@@ -4,6 +4,10 @@
 .icon-checkbox:before { content: "\e61c"; }
 .icon-cb-checked:before { content: "\e61d"; }
 
+.shopping-cart-page {
+    padding-bottom: 120rem / $pxConvertRem;
+}
+
 .cart-nav {
     height: 30rem / $pxConvertRem;
     color: #c6c6c6;
@@ -96,6 +100,7 @@
     padding: 20rem / $pxConvertRem;
     height: 120rem / $pxConvertRem;
     border-top: 1px solid #e0e0e0;
+    background: #fff;
 
     .iconfont {
         position: absolute;

@@ -47,13 +47,14 @@
             </p>
         </div>
     </div>
-    <div class="opt-panel">
+    <div class="opt-panel hide">
         <div class="put-in-favorite">
             <span class="iconfont">&#xe622;</span>
-            移入收藏夹
+            <span>移入</span>
+            收藏夹
         </div>
         <div class="del">
-            <span class="iconfont">&#xe61a;</span>
+            <span class="iconfont">&#xe626;</span>
             删除
         </div>
     </div>