这篇文章会用到两个JQuery的插件。都是相当不错的。我会通过这两个插件来实现两个例子,一个是幻灯片的放映功能,一个是drag-drop样式的购物车。
1. 实现幻灯片效果:
这里会用到JQuery.js这个基本库,另外还用了jquery-ui-personalized-1.6rc4.min.js和JQuerytimer.js这两个插件,前者是ui方面的功能库,后者用来实现计时功能。
下载personalized脚本的地址:
下载JQuerytimer插件的地址: http://jquery.offput.ca/every/
然后是用到的html代码:
使用到的Javascript:
我是通过把需要播放的内容存放到一个array中,然后再使用everytime功能来每两秒钟播放调用一个slide功能,每次slide的内容是array中的一个元素,通过下标的改变来改变现实的内容。
截图:
2.可拖拽的购物车实现:
这里先说明下需要的软件支持,vs2008(sp1), MSChart的安装。有了它们就可以开始了。
首先我们假设需要网上购买的产品包含四个属性，Code,Name,Description和Price。
这里我们不适用数据库了,所以先给产品在代码里定义几个就行了。
在前台的html页面中有个DataList控件用来实现产品,datalist的代码和后台数据的绑定代码如下:
我们DataList的每个元素都是个Div,每个产品都为之创建一个div,Div的元素使用了product的'price','code'和'id'属性。绑定数据后你运行一下界面如下:
接下来我们要做的是让div可以拖动。
第一步是在你的aspx文件中引用JQuery和它的插件:
第二步使用JQuery的draggable方法来实现每个div的可拖动:
第三步是让拖动的div能够放到某个区域,用到JQuery的Droppable方法,它有三个参数,accept:能够接受的控件类型,hoverClass,当放下时是否产生hover效果,drop:function(ev,ui){}这个方法你可以用来写任何拖放后的其它要实现的效果。全部的代码如下:
最后看看运行效果:
