自己動(dòng)手制作jquery插件之自動(dòng)添加刪除行的實(shí)現(xiàn)
更新時(shí)間：2011年10月13日 23:30:20 作者：
我們常常會(huì)遇到這樣的情況，一個(gè)系統(tǒng)中有大量的需要對(duì)一個(gè)行進(jìn)行復(fù)制添加，希望能夠進(jìn)行批量的操作，這個(gè)時(shí)候，我們就可以考慮把它做成一個(gè)jquery插件了.
效果圖如下，演示地址請點(diǎn)擊
既然是插件，那就應(yīng)該可以使用$("div").method({})這樣的jquery寫法來調(diào)用，它的做法是:
(function($) {
})(jQuery);
然后給插件命名:
這樣我們就可以在頁面里用$(dom).autoAdd({...}) 來調(diào)用這個(gè)插件了，接著我們再給它一些特定的參數(shù)，比如我們要復(fù)制哪一行，要給哪個(gè)按鈕加上添加、刪除的功能，這些我都使用class來標(biāo)識(shí);
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);
看起來有點(diǎn)長，實(shí)際沒什么，也許你突然想加個(gè)鼠標(biāo)移上去樣式了，也可以繼續(xù)往后加，這里我都給定了一些默認(rèn)值，方便調(diào)用。解釋下這些變量的意思先吧，changeInput,是我加的一個(gè)文本框，我希望輸入多少的數(shù)字，就出現(xiàn)多少行，temRowClass就是我要復(fù)制的模版行，后面的就很好理解了；
由于時(shí)間關(guān)系，今天就到這吧，明天會(huì)詳細(xì)說明這些功能是如何實(shí)現(xiàn)的。
既然是插件，那就應(yīng)該可以使用$("div").method({})這樣的jquery寫法來調(diào)用，它的做法是:
復(fù)制代碼 代碼如下:
(function($) {
})(jQuery);
然后給插件命名:
復(fù)制代碼 代碼如下:
$.fn.autoAdd = function(options) {}
這樣我們就可以在頁面里用$(dom).autoAdd({...}) 來調(diào)用這個(gè)插件了，接著我們再給它一些特定的參數(shù)，比如我們要復(fù)制哪一行，要給哪個(gè)按鈕加上添加、刪除的功能，這些我都使用class來標(biāo)識(shí);
復(fù)制代碼 代碼如下:
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);
看起來有點(diǎn)長，實(shí)際沒什么，也許你突然想加個(gè)鼠標(biāo)移上去樣式了，也可以繼續(xù)往后加，這里我都給定了一些默認(rèn)值，方便調(diào)用。解釋下這些變量的意思先吧，changeInput,是我加的一個(gè)文本框，我希望輸入多少的數(shù)字，就出現(xiàn)多少行，temRowClass就是我要復(fù)制的模版行，后面的就很好理解了；
由于時(shí)間關(guān)系，今天就到這吧，明天會(huì)詳細(xì)說明這些功能是如何實(shí)現(xiàn)的。
相關(guān)文章
上文介紹了利用$函數(shù)篩選頁面上的元素和替代onload事件。$函數(shù)還有一個(gè)作用，當(dāng)它的參數(shù)是一個(gè)HTML片段的時(shí)候，它返回的是包含這個(gè)HTML元素的包裝集。2010-03-03
jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D
這篇文章主要為大家詳細(xì)介紹了jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI，本文的重點(diǎn)在于EasyUI表單驗(yàn)證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jQuery實(shí)現(xiàn)切換字體大小的方法,實(shí)例分析了jQuery操作字體css樣式的技巧,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jQuery中:checkbox選擇器用法,實(shí)例分析了:checkbox選擇器的功能、定義及匹配復(fù)選框的使用技巧,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播效果
本文給大家介紹的是使用jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
JQuery 應(yīng)用 JQuery.groupTable.js
在以往的項(xiàng)目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個(gè)很常見的表格。通常對(duì)分類的字段先進(jìn)行排序。為了讓分類表現(xiàn)的更直觀。2010-12-12
Jquery數(shù)字上下滾動(dòng)動(dòng)態(tài)切換插件
有時(shí)我們需要?jiǎng)討B(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結(jié)合后臺(tái)php實(shí)現(xiàn)一個(gè)滾動(dòng)的數(shù)字展示效果。2015-08-08