jQuery EasyUI使用教程之创建一个拖放的购物车
2015-09-29 11:52
519 查看
<jQuery EasyUI最新版下载>
如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能。
在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。
查看演示
在页面上显示商品:
?
正如你在上面代码中看到的一样,我们添加了一个ul元素,其中包含了一些li元素来显示商品。每个商品的名字和价格属性都包含在p元素中。
创建购物车:
?
我们使用数据网格来显示购物车的物品。
拖动复制的商品:
?
请注意,我们将可拖动属性'proxy'设置为'clone',因此拖动元素将有复制的效果。
在购物车中放置选中的商品:
?
当放置好该商品之后,我们首先得到商品的名称和价格,然后调用'addProduct'函数来更新购物车。
下载该EasyUI示例:easyui-shopping-demo.zip
如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能。
在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。
查看演示
在页面上显示商品:
?
创建购物车:
?
拖动复制的商品:
?
在购物车中放置选中的商品:
?
下载该EasyUI示例:easyui-shopping-demo.zip
相关文章推荐
- jquery checkbox勾选/取消勾选的诡异问题
- 7款jQuery图片轮播滑动插件
- ajax学习
- jQuery.validate验证上传文件大小
- jQuery自定义插件开发基础1——jQuery实用函数的实现
- jqzoom基于jQuery的图片放大镜
- jquery中eq()与get()的区别
- jquery中attr和prop的区别
- Jquery 全选/反选
- Jquery中$.ajax()方法详解【转】
- jquery中attr和prop的区别
- jQuery对象原型构建-学习笔记
- jQuery Mobile 自定义按钮图标
- jQuery中的ajax async同步和异步详解
- 滚动加载(ajax)内容添加事件 && jQuery.on() 函数详解
- jQuery中removeClass()方法用法实例
- jQuery获取动态添加的元素,live和on的区别
- jQuery 中的防冲突(noConflict)机制
- jquery中的each()方法详解
- jQuery 源码 extend