jquery ui实现拖动式购物车(带计费功能)

作者:林炜贤来源:www.163css.com发表时间:(2013-01-09)

从今天起,我们来讲下jqueryui,喜欢的朋友先上这个网站“http://jqueryui.com/”。对于jquery ui,我想大家早就用过了,它有很多DEMO,比较拖动,TAB菜单,autocomplete,tooltip这样的常用效果,我们今天用的版本是1.9.2,jquery也在不断地完善啊,支持啊。。。

我们今天这个例子是基于droppable里的simple photo manager做出来的。。。

这个代码,我们用来实现拖动,cancel表示对于样式名为ui-icon的元素就不可以拖动,而revert表示可以返回,containment表示我们的拖动只能基于当前文档,helper那里,其实可以写上拖动的地方,但我们这里表示复制。。

这个表示我们的购物车允许放东西,accept表示的是从id为gallery里来的li,拖动进来后就加上样式名ui-state-highlight,放的时候有一个function drop,记得把参数写上去。。

关于deleteImage这一块,我们做了修改。。

我们在拖动时,用clone来实现复本,这样更符合我们在商城里的例子,对于end函数,我在JQ API里得知,它表示事件结束,返父节点,比如上面的就是说又从$(this)开始。。。

你们可以看到,我们的计费,是采用each这个函数来实现的,toFixed(2)用来表示我们保留两位小数。。。

这里是购物车的删除功能,同样,我们也是采用each来实现删除计价,我在百度上看到许多人的做法是通过个数的减少,再乘以单价实现自动计价的,我们也差不多,也就是判断商品个数,实现计价。。。

这是我们用来实现弹窗放大效果的代码,当然了,这是jquery ui的另一个功能,因此,这个购物车,包含了jquery ui的几个重要功能,拖放,弹窗。。。

大家提出加上清空购物车,我就加多一个功能啦。。。

以下是我制作的效果截图:

 

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2013/01/shop/index.html

下载地址:jquery ui实现拖动式购物车(带计费功能).rar

返回作者主页:www.163css.com阅读 (8724)
更多 1