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


Posted in Javascript onAugust 01, 2010

去年做项目时遇到一个模块,需要能够动态的增减控件。当初第一个解决方案是用UpdatePanel做页面的局部更新。由于页面很大,而且控件非常多,当动态增加的控件非常多的时候,会变得很慢。后来就想着用javascript做动态的增减控件,最后在提交页面的时候搜集页面控件的数据,效果很棒,但是由于当时仅仅是为那一个模块做,所以扩展性很差,而且那时写javascript代码非常复杂,仅仅为了动态增减的效果,就写超过了500行javascript代码。

后来去年末时间空闲下来的时候重写了这段代码,现在这段代码压缩到100行内,而且扩展方便,可以非常轻松的增减控件的数量,使用非常简单。

效果图:
关于jquery动态增减控件的一些想法和小插件
一个简单的例子:

<?xml version="1.0" encoding="iso-8859-1"?> 
<html> 
<head> 
<title></title> 
<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" src="dynamicAddRemover.js"></script> 
<script language="javascript"> 
$(function(){ 
$("table").dynamicAddRemover(); 
}); 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="text" name="text1" id="text1" value="Text"></input> 
<button type="button" name="btn1" value="btn1" id="btn1" >Button</button> 
</td> 
</tr> 
</table> 
</body> 
</html>

加了限制个数事件后的例子:
<?xml version="1.0" encoding="iso-8859-1"?> 
<html> 
<head> 
<title></title> 
<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript" src="dynamicAddRemover.js"></script> 
<script language="javascript"> $(function(){ 
$("#table1").dynamicAddRemover({ 
addedEvent:function(newCtl, options){ 
//clear the textbox. 
newCtl.find(":text").val(''); 
if($("table").size() > 5) 
{ 
//hide the add button. 
newCtl.find("img[id$='" + options.adderId + "']").hide(); 
} 
}, 
removedEvent:function(prevCtl, nextCtl, options){ 
if($("table").size() <= 5) 
{ 
//show the add button. 
$("table:last").find("img[id$='" + options.adderId + "']").show(); 
} 
} 
}); 
}); 
</script> 
</head> 
<body> 
<table id='table1'> 
<tr> 
<td> 
<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="text" name="text1" id="text1" value="Text"></input> 
<button type="button" name="btn1" value="btn1" id="btn1" >Button</button> 
</td> 
</tr> 
</table> 
</body> 
</html>

参数的定义:
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

Javascript 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
js读取注册表的键值示例
Sep 25 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
vue+Element-ui实现登录注册表单
Nov 17 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 #Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
jQuery对象[0]是什么含义?
Jul 31 #Javascript
动态调用CSS文件的JS代码
Jul 29 #Javascript
date.parse在IE和FF中的区别
Jul 29 #Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Yii2单元测试用法示例
2016/11/12 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
MSN消息提示类
2006/09/05 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
Vue3.0的优化总结
2020/10/16 Javascript
Python素数检测的方法
2015/05/11 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python正则表达式面试题解答
2020/04/28 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python 实现一个计时器
2020/07/28 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
市场部经理岗位职责
2014/04/10 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014年度思想工作总结
2014/11/27 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
nginx常用配置conf的示例代码详解
2022/03/21 Servers
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
python和anaconda的区别
2022/05/06 Python