轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015-11-30 00:00
966 查看
在本文中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面,购物篮中的物品和价格将更新,分享给大家,具体内容如下:
效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201601/6fba3c60df11ebd461e180717db14fc5)
具体代码如下
显示页面上的商品:
正如您所看到的上面的代码,我们添加一个包含一些 <li> 元素的 <ul> 元素来显示商品。所有商品都有名字和价格属性,它们包含在<p> 元素中。
创建购物车:
我们使用数据网格(datagrid)来显示购物篮中的物品。
拖动克隆的商品:
请注意,我们把 draggable 属性的值从 'proxy' 设置为 'clone',所以拖动元素将由克隆产生。
放置选择商品到购物车中
每当放置商品的时候,我们首先得到商品名称和价格,然后调用 'addProduct' 函数来更新购物篮。
EasyUI实现拖放商品放置购物车的功能就介绍到这,有了本文为大家提供的实例,相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计,谢谢大家的阅读。
Jquery插件 easyUI属性汇总
jQuery EasyUI API 中文文档 - ComboBox组合框
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
效果图:
具体代码如下
显示页面上的商品:
<ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.gif"/> <div> <p>Balloon</p> <p>Price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt2.gif"/> <div> <p>Feeling</p> <p>Price:$25</p> </div> </a> </li> <!-- other products --> </ul>
正如您所看到的上面的代码,我们添加一个包含一些 <li> 元素的 <ul> 元素来显示商品。所有商品都有名字和价格属性,它们包含在<p> 元素中。
创建购物车:
<div class="cart"> <h1>Shopping Cart</h1> <table id="cartcontent" style="width:300px;height:auto;"> <thead> <tr> <th field="name" width=140>Name</th> <th field="quantity" width=60 align="right">Quantity</th> <th field="price" width=60 align="right">Price</th> </tr> </thead> </table> <p class="total">Total: $0</p> <h2>Drop here to add to cart</h2> </div>
我们使用数据网格(datagrid)来显示购物篮中的物品。
拖动克隆的商品:
$('.item').draggable({ revert:true, proxy:'clone', onStartDrag:function(){ $(this).draggable('options').cursor = 'not-allowed'; $(this).draggable('proxy').css('z-index',10); }, onStopDrag:function(){ $(this).draggable('options').cursor='move'; } });
请注意,我们把 draggable 属性的值从 'proxy' 设置为 'clone',所以拖动元素将由克隆产生。
放置选择商品到购物车中
$('.cart').droppable({ onDragEnter:function(e,source){ $(source).draggable('options').cursor='auto'; }, onDragLeave:function(e,source){ $(source).draggable('options').cursor='not-allowed'; }, onDrop:function(e,source){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name, parseFloat(price.split('$')[1])); } }); var data = {"total":0,"rows":[]}; var totalCost = 0; function addProduct(name,price){ function add(){ for(var i=0; i<data.total; i++){ var row = data.rows[i]; if (row.name == name){ row.quantity += 1; return; } } data.total += 1; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalCost += price; $('#cartcontent').datagrid('loadData', data); $('div.cart .total').html('Total: $'+totalCost); }
每当放置商品的时候,我们首先得到商品名称和价格,然后调用 'addProduct' 函数来更新购物篮。
EasyUI实现拖放商品放置购物车的功能就介绍到这,有了本文为大家提供的实例,相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计,谢谢大家的阅读。
您可能感兴趣的文章:
jquery EasyUI的formatter格式化函数代码Jquery插件 easyUI属性汇总
jQuery EasyUI API 中文文档 - ComboBox组合框
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
相关文章推荐
- 轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
- 轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
- 轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
- 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
- 轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
- 基于Jquery实现焦点图淡出淡入效果
- PHP,Jquery,两种Ajax请求
- JQuery中常用方法备忘
- jQuery事件之传递参数
- Jquery禁止/恢复按钮与文本框代码
- Jquery禁止/恢复按钮与文本框代码
- jquery的$.ajax async使用详解
- ajax 第二节jquery版
- jquery ajax 多次提交问题
- IE浏览器缓存jquery的AJAX请求
- 南大软院大神养成计划--jquery
- jquery的ajax遇到的问题
- JQuery上传插件Uploadify
- jQuery+Ajax+PHP实现异步分页数据显示
- jquery.easing.js的使用示例