jQuery EasyUI使用教程之创建一个拖放的购物车

<jQuery EasyUI最新版下载>

如果你能利用你的web应用程序很容易地实现简单的拖放,那么你一定知道一些特别的东西,使用jQuery EasyUI,我们能在web应用程序中简单地实现拖放功能。

在本教程中,我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。

查看演示

在页面上显示商品:

<
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元素中。

创建购物车:

<
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
>

我们使用数据网格来显示购物车的物品。

拖动复制的商品:

$(
‘.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‘,因此拖动元素将有复制的效果。

在购物车中放置选中的商品:

$(
‘.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

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的文章

时间: 2024-10-25 04:50:13

jQuery EasyUI使用教程之创建一个拖放的购物车的相关文章

jQuery EasyUI使用教程之创建一个课程表

<jQuery EasyUI最新版下载> 本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表.我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表的单元格中.学校的科目是一个"div class='item'"元素,然而时间表单元格是一个"td class='drop'"元素. 查看演示 显示学校科目 < div class = "left" > < table &

jQuery EasyUI使用教程之创建一个链接按钮

<jQuery EasyUI最新版下载> 本教程主要为大家展示如何使用jQuery EasyUI创建一个链接按钮.通常情况下,使用"button/"元素来创建一个按钮:使用"a/"元素来创建链接按钮.所以事实上一个链接按钮是一个显示为按钮样式"a/"元素. 查看演示 为了创建一个链接按钮,你所需要做的就是添加一个名为'easyui-linkbutton'的类属性到"a/"元素中: < div style =

jQuery EasyUI使用教程之创建一个简单的菜单

<jQuery EasyUI最新版下载> 本教程将为你展示如何使用jQuery EasyUI创建一个简单的菜单. 查看演示 菜单被定义在一些DIV标记中,如下所示: < div id = "mm" class = "easyui-menu" style = "width:120px;" > < div onclick = "javascript:alert('new')" >New</

jQuery EasyUI使用教程之创建展开行详细编辑表单的CRUD应用

当切换datagrid视图到"detailview"时,用户可以展开一行来显示该行下面的任何详细信息.此功能允许用户为放置在行详细信息面板中的编辑表单提供恰当的布局.在本教程中,我们使用DataGrid组件来减少编辑表单所占用的空间. 查看演示 Step 1:在HTML标记中创建DataGrid <table id="dg" title="My Users" style="width:550px;height:250px"

jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 查看演示 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" style="width:400px;height:100

jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识.折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的.当用户点击面板标题时,该面板的主体内容可见,其他面板的内容将会被隐藏. 查看演示 我们将创建三个面板,其中第三个面板包含了一个树形菜单. < div class = "easyui-accordion" style = "width:300px;height:2

jQuery EasyUI使用教程之创建Web页面的边框布局

<jQuery EasyUI最新版下载> 本教程主要为大家演示如何使用jQuery EasyUI创建Web页面的边框布局.该边框布局提供五个区域:east.west.north.south.center,以下是一些常见的用法: north区域可以用于显示一个网站的标语 south区域可用于显示版权及其他注意事项 west区域可用于显示导航菜单 east区域可用于显示促销项目 center区域可用于显示主要内容 查看演示 想要应用一个布局,首先你应该确认一个布局容器,然后定义一些区域.布局中必须

雷林鹏分享:jQuery EasyUI 菜单与按钮 - 创建菜单按钮

jQuery EasyUI 菜单与按钮 - 创建菜单按钮(Menu Button) 菜单按钮(Menu Button)包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单. 为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu),下面是一个实例: Edit Help Undo Redo Cut Copy Paste Delete Select All Help Update Abou

雷林鹏分享:jQuery EasyUI 菜单与按钮 - 创建分割按钮

jQuery EasyUI 菜单与按钮 - 创建分割按钮(Split Button) 分割按钮(Split Button)包含一个链接按钮(Link Button)和一个菜单(Menu).当用户点击或者鼠标悬停在向下箭头区域,将会显示一个对应的菜单.本实例演示了如何创建和使用分割按钮(Split Button). 我们创建一个分割按钮(Split Button)和一个链接按钮(Link Button): Edit Undo Redo Cut Copy Paste Open Firefox Int