html页面控件叠加,html 页面控件动态添加和删除

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