1.dynamicAddRemover.js
/**
* dynamicAddRemover.js
* @author: Zhongy
* @version: 0.0.3
*/
$.fn.dynamicAddRemover = function(options){
//Merge the default options and the custom options
options = $.extend({},
$.fn.dynamicAddRemover.defaults,
{rootWrapper: !$(this).attr("id")? $(this) : "#" + $(this).attr("id")},
options);
//Define the add click event
var addClickEvent = function(event){
var refWrapper = event.data;
var newWrapper = refWrapper.clone();
//execute the custom event before adding.
if(options.addingEvent != null){
options.addingEvent(newWrapper, options);
}
refWrapper.after(newWrapper);//append the new wrapper after the last wrapper.
newWrapper.find("img[id$='" + options.adderId + "']").show().unbind().bind("click", newWrapper, addClickEvent);
newWrapper.find("img[id$='" + options.removerId + "']").show().unbind().bind("click", newWrapper, removeClickEvent);
newWrapper.attr("isDynamic", "true");
$(this).hide();//hide the expand button which fire the event.
//execute the custom event after adding,
//you can write the event of modifying the controls' id in the wrapper.
if(options.addedEvent != null){
options.addedEvent(newWrapper, options);
}
};
//Define the remove click event
var removeClickEvent = function(event){
var refWrapper = event.data;
var rootWrapper = refWrapper.parent();
var prevWrapper = refWrapper.prev();
var nextWrapper = refWrapper.next();
//show the previous wrapper's add button.
if(!nextWrapper.attr("isDynamic")){
prevWrapper.find("img[id$='" + options.adderId + "']").show();
}
//execute the custom event before removing.
if(options.removingEvent != null){
options.removingEvent(refWrapper, options);
}
//remove the wrapper using DOM.
rootWrapper.get(0).removeChild($(refWrapper).get(0));
//execute the custom event after removing.
if(options.removedEvent != null){
options.removedEvent(prevWrapper, nextWrapper, options);
}
};
//initialize the dynamicAddRemover UI and attach the event.
var imgHtml = "" +
"" +
"";
$(this).find("tr:last").append("
" + imgHtml + "");//append the image button after the wrapper.$(this).find("img[id$='" + options.adderId + "']").unbind().bind("click", $(options.rootWrapper), addClickEvent);
$(this).find("img[id$='" + options.removerId + "']").hide();
};
$.fn.dynamicAddRemover.defaults = {
rootWrapper: "table",
addingEvent: null,
addedEvent: null,
removingEvent: null,
removedEvent: null,
adderId: "imgExpBtn",
removerId: "imgColBtn",
collapseImgUrl: 'icon_collapse.gif',
expandImgUrl: 'icon_expand.gif'
};
2.测试1 HTML 文件
$(function(){
$("table").dynamicAddRemover();
});
Volvo Saab Opel Audi Button |
3.测试2 HTML文件
$(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();
}
}
});
});
Volvo Saab Opel Audi Button |