去年做项目时遇到一个模块，需要能够动态的增减控件。当初第一个解决方案是用UpdatePanel做页面的局部更新。由于页面很大，而且控件非常多，当动态增加的控件非常多的时候，会变得很慢。后来就想着用javascript做动态的增减控件，最后在提交页面的时候搜集页面控件的数据，效果很棒，但是由于当时仅仅是为那一个模块做，所以扩展性很差，而且那时写javascript代码非常复杂，仅仅为了动态增减的效果，就写超过了500行javascript代码。
后来去年末时间空闲下来的时候重写了这段代码，现在这段代码压缩到100行内，而且扩展方便，可以非常轻松的增减控件的数量,使用非常简单。
效果图：
一个简单的例子:
复制代码 代码如下:
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title></title>
<script language="javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script language="javascript" src="dynamicAddRemover.js"><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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script language="javascript" src="dynamicAddRemover.js"><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
后来去年末时间空闲下来的时候重写了这段代码，现在这段代码压缩到100行内，而且扩展方便，可以非常轻松的增减控件的数量,使用非常简单。
效果图：
一个简单的例子:
复制代码 代码如下:
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title></title>
<script language="javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script language="javascript" src="dynamicAddRemover.js"><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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script language="javascript" src="dynamicAddRemover.js"><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
标签：
jquery,动态增减,控件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“关于jquery动态增减控件的一些想法和小插件”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。