使用eaayUI创建购物车

@author YHC

如果你能够简单的实现拖动和放置在你的web应用中,然后你知道你有一些特别的东西,使用 jQuery EasyUI我们在我们的应用中可以简单的实现拖动和放置.

在这个教程中我们将向你展示如何创建一个购物车页面启用用户拖动和放置用户想买的商品,购物栏和价格将更新.

 查看Demo

显示 商品在页面:

[html] view plaincopy

1. <ul class="products">    
2.     <li>    
3.         <a href="#" class="item">    
4.             <img src="images/shirt1.gif"/>    
5.             <div>    
6.                 <p>Balloon</p>    
7.                 <p>Price:$25</p>    
8.             </div>    
9.         </a>    
10.     </li>    
11.     <li>    
12.         <a href="#" class="item">    
13.             <img src="images/shirt2.gif"/>    
14.             <div>    
15.                 <p>Feeling</p>    
16.                 <p>Price:$25</p>    
17.             </div>    
18.         </a>    
19.     </li>    
20.     <!-- other products -->    
21. </ul>    

你可以看见以上代码,我们添加一个<ul>元素包含一些 <li>元素去显示商品,所有商品都有名字和价格属性,他们包含在<p>标签中.

创建一个购物车:

[html] view plaincopy

1. <div class="cart">    
2.     <h1>Shopping Cart</h1>    
3.     <table id="cartcontent" style="width:300px;height:auto;">    
4.         <thead>    
5.             <tr>    
6.                 <th field="name" width=140>Name</th>    
7.                 <th field="quantity" width=60 align="right">Quantity</th>    
8.                 <th field="price" width=60 align="right">Price</th>    
9.             </tr>    
10.         </thead>    
11.     </table>    
12.     <p class="total">Total: $0</p>    
13.     <h2>Drop here to add to cart</h2>    
14. </div>   

我们使用datagrid 显示购物栏选项.

拖动克隆的商品:

[javascript] view plaincopy

1. $('.item').draggable({    
2.     revert:true,    
3.     proxy:'clone',    
4.     onStartDrag:function(){    
5.         $(this).draggable('options').cursor = 'not-allowed';    
6.         $(this).draggable('proxy').css('z-index',10);    
7.     },    
8.     onStopDrag:function(){    
9.         $(this).draggable('options').cursor='move';    
10.     }    
11. });   

注意:我们设置draggable 属性 'proxy'为'clone',所以拖动元素将由克隆产生.

放置选择商品到购物车中

[javascript] view plaincopy

1. $('.cart').droppable({    
2.     onDragEnter:function(e,source){    
3.         $(source).draggable('options').cursor='auto';    
4.     },    
5.     onDragLeave:function(e,source){    
6.         $(source).draggable('options').cursor='not-allowed';    
7.     },    
8.     onDrop:function(e,source){    
9.         var name = $(source).find('p:eq(0)').html();    
10.         var price = $(source).find('p:eq(1)').html();    
11.         addProduct(name, parseFloat(price.split('$')[1]));    
12.     }    
13. });    
14. var data = {"total":0,"rows":[]};    
15. var totalCost = 0;    
16. function addProduct(name,price){    
17.     function add(){    
18.         for(var i=0; i<data.total; i++){    
19.             var row = data.rows[i];    
20.             if (row.name == name){    
21.                 row.quantity += 1;    
22.                 return;    
23.             }    
24.         }    
25.         data.total += 1;    
26.         data.rows.push({    
27.             name:name,    
28.             quantity:1,    
29.             price:price    
30.         });    
31.     }    
32.     add();    
33.     totalCost += price;    
34.     $('#cartcontent').datagrid('loadData', data);    
35.     $('div.cart .total').html('Total: $'+totalCost);    
36. }       

每当放置商品的时候,我们首先得到商品名称和价格,然后调用'addProduct'函数更新购物栏thematter 个人站点 http://www.4865.com和

http://www.9748.com欢迎访问.

下载 EasyUI 示例代码:

easyui-shopping-demo.zip