您好,欢迎访问一九零五行业门户网

关于jquery动态增减控件的一些想法和小插件_jquery

去年做项目时遇到一个模块,需要能够动态的增减控件。当初第一个解决方案是用updatepanel做页面的局部更新。由于页面很大,而且控件非常多,当动态增加的控件非常多的时候,会变得很慢。后来就想着用javascript做动态的增减控件,最后在提交页面的时候搜集页面控件的数据,效果很棒,但是由于当时仅仅是为那一个模块做,所以扩展性很差,而且那时写javascript代码非常复杂,仅仅为了动态增减的效果,就写超过了500行javascript代码。
后来去年末时间空闲下来的时候重写了这段代码,现在这段代码压缩到100行内,而且扩展方便,可以非常轻松的增减控件的数量,使用非常简单。
效果图:
一个简单的例子:
复制代码 代码如下:
volvo
saab
opel
audi
button
加了限制个数事件后的例子:
复制代码 代码如下:
volvo
saab
opel
audi
button
参数的定义:
复制代码 代码如下:
rootwrapper default: table
根容器,就是需要增减的控件的根容器,目前代码上仅仅支持table根容器。
adderid default:imgexpbtn
增加按钮的id。
removerid default:imgcolbtn
删除按钮的id。
addingevent default:null
在增加事件之前所触发的自定义事件,参数为newwrapper和options, newwrapper为新增的控件的父容器,options为参数列表自己。
addedevent default:null
在增加事件之后所触发的自定义事件,参数为newwrapper和options, newwrapper为新增的控件的父容器,options为参数列表自己。
removingevent default:null
在删除事件之前所触发的自定义事件,参数为refwrapper和options, rewrapper为被删除的控件的父容器,options为参数列表自己。
removedevent default:null
在删除事件之后所触发的自定义事件,参数为prevwrapper,nextwrapper和options, prevwrapper为被删除的父容器的上一个容器,nextwrapper为被删除的父容器的下一个容器,,options为参数列表自己。
collapseimgurl default:'icon_collapse.gif'
增加按钮的路径
expandimgurl default:'icon_expand.gif'
删除按钮的路径
注意事项:
.可以添加在增减过程中需要的自定义参数和变量,如: $(table).dynamicaddremover({param1:param1, param2:param2});
使用时,如:options.param1等等。
.根容器必须有唯一id且指定时必须唯一。如果有多个模块(多个根容器)需要使用可以这样:$(#table1).dynamicaddremover(),$(#table2).dynamicaddremover()等等。
.新添加的控件里的id和name并没有更新,如果有特别业务需要,请在addedevent里添加生成新id的业务逻辑。
.本插件需要jquery 1.2.6版本以上支持。
源代码和原理很简单,仅仅作为一个抛砖引玉的作用。以下是包括源代码的附件。
dynamicaddremover.rar
其它类似信息

推荐信息