jQuery EasyUI使用教程之创建一个拖放的购物车
来源:互联网 发布:2016年中国m2数据 编辑:程序博客网 时间:2024/06/05 16:03
<jQuery EasyUI最新版下载>
如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能。
在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。
查看演示
在页面上显示商品:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<
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
>
正如你在上面代码中看到的一样,我们添加了一个ul元素,其中包含了一些li元素来显示商品。每个商品的名字和价格属性都包含在p元素中。
创建购物车:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<
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
>
我们使用数据网格来显示购物车的物品。
拖动复制的商品:
1
2
3
4
5
6
7
8
9
10
11
$(
'.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'
;
}
});
请注意,我们将可拖动属性'proxy'设置为'clone',因此拖动元素将有复制的效果。
在购物车中放置选中的商品:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(
'.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++){
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示例:easyui-shopping-demo.zip
0 0
- jQuery EasyUI使用教程之创建一个拖放的购物车
- 使用easyUI创建一个拖放的购物车
- jQuery EasyUI使用教程之树的拖放控制
- jQuery EasyUI使用教程之创建一个简单的菜单
- jQuery EasyUI使用教程之创建一个RSS阅读器
- jQuery EasyUI使用教程之创建一个课程表
- jQuery EasyUI使用教程之创建一个链接按钮
- jQuery EasyUI使用教程之创建一个菜单按钮
- jQuery EasyUI使用教程之创建一个拆分按钮
- jQuery EasyUI使用教程之创建一个属性网格
- jQuery EasyUI使用教程之创建基本的树网格
- jQuery EasyUI使用教程之创建复杂的树网格
- jQuery EasyUI使用教程之使用标记创建树形菜单
- jQuery EasyUI使用教程之创建可折叠面板
- jQuery EasyUI使用教程之创建标签页
- jQuery EasyUI使用教程之创建简单窗口
- jQuery EasyUI使用教程之创建异步树
- jQuery EasyUI使用教程之创建树形下拉框
- 【半转半写】div水平垂直居中的完美解决方案
- 让Winform控件同时支持单击和双击事件
- C中.h头文件的写法
- oracle 12c 安装
- Android M 新的运行时权限开发者需要知道的一切
- jQuery EasyUI使用教程之创建一个拖放的购物车
- Python查询天气预报
- 使用百度地图API
- 网络攻击知识之几种IP地址攻击方式
- python安装第三方库
- JAVA实现AES加密
- 推送消息接收
- Linux I/O Models
- 最短路径 -- spfa