DIV CSS 佈局教程網

效果圖如下，演示地址請點擊

既然是插件，那就應該可以使用$("div").method({})這樣的jquery寫法來調用，它的做法是:
代碼如下:
(function($) {
})(jQuery);

然後給插件命名:
代碼如下:$.fn.autoAdd = function(options) {}
這樣我們就可以在頁面裡用$(dom).autoAdd({...}) 來調用這個插件了，接著我們再給它一些特定的參數，比如我們要復制哪一行，要給哪個按鈕加上添加、刪除的功能，這些我都使用class來標識;
代碼如下:
var settings = { changeInput: $("#input"), tempRowClass: "tempRow", min: 1, max: 90, addButtonClass: "addbtn", delButtonClass: "delbtn", addCallBack: null, delCallBack: null, indexClass: "index", insertClass: "insertbtn", moveUpClass: "moveupbtn", moveDownClass: "movedownbtn" };
if (options) $.extend(settings, options);

看起來有點長，實際沒什麼，也許你突然想加個鼠標移上去樣式了，也可以繼續往後加，這裡我都給定了一些默認值，方便調用。解釋下這些變量的意思先吧，changeInput,是我加的一個文本框，我希望輸入多少的數字，就出現多少行，temRowClass就是我要復制的模版行，後面的就很好理解了；
由於時間關系，今天就到這吧，明天會詳細說明這些功能是如何實現的。