站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 关于jquery动态增减控件的一些想法和小插件
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

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

来源: 易采站长站

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

一个简单的例子:
代码如下:
<?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){

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -