自己動(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插件了.
效果圖如下,演示地址請(qǐng)點(diǎn)擊

既然是插件,那就應(yīng)該可以使用$("div").method({})這樣的jquery寫法來(lái)調(diào)用,它的做法是:
(function($) {
})(jQuery);
然后給插件命名:
這樣我們就可以在頁(yè)面里用$(dom).autoAdd({...}) 來(lái)調(diào)用這個(gè)插件了,接著我們?cè)俳o它一些特定的參數(shù),比如我們要復(fù)制哪一行,要給哪個(gè)按鈕加上添加、刪除的功能,這些我都使用class來(lái)標(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);
看起來(lái)有點(diǎn)長(zhǎng),實(shí)際沒(méi)什么,也許你突然想加個(gè)鼠標(biāo)移上去樣式了,也可以繼續(xù)往后加,這里我都給定了一些默認(rèn)值,方便調(diào)用。解釋下這些變量的意思先吧,changeInput,是我加的一個(gè)文本框,我希望輸入多少的數(shù)字,就出現(xiàn)多少行,temRowClass就是我要復(fù)制的模版行,后面的就很好理解了;
由于時(shí)間關(guān)系,今天就到這吧,明天會(huì)詳細(xì)說(shuō)明這些功能是如何實(shí)現(xiàn)的。

既然是插件,那就應(yīng)該可以使用$("div").method({})這樣的jquery寫法來(lái)調(diào)用,它的做法是:
復(fù)制代碼 代碼如下:
(function($) {
})(jQuery);
然后給插件命名:
復(fù)制代碼 代碼如下:
$.fn.autoAdd = function(options) {}
這樣我們就可以在頁(yè)面里用$(dom).autoAdd({...}) 來(lái)調(diào)用這個(gè)插件了,接著我們?cè)俳o它一些特定的參數(shù),比如我們要復(fù)制哪一行,要給哪個(gè)按鈕加上添加、刪除的功能,這些我都使用class來(lái)標(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);
看起來(lái)有點(diǎn)長(zhǎng),實(shí)際沒(méi)什么,也許你突然想加個(gè)鼠標(biāo)移上去樣式了,也可以繼續(xù)往后加,這里我都給定了一些默認(rèn)值,方便調(diào)用。解釋下這些變量的意思先吧,changeInput,是我加的一個(gè)文本框,我希望輸入多少的數(shù)字,就出現(xiàn)多少行,temRowClass就是我要復(fù)制的模版行,后面的就很好理解了;
由于時(shí)間關(guān)系,今天就到這吧,明天會(huì)詳細(xì)說(shuō)明這些功能是如何實(shí)現(xiàn)的。
您可能感興趣的文章:
相關(guān)文章
jquery學(xué)習(xí)筆記 用jquery實(shí)現(xiàn)無(wú)刷新登錄
為了防止以后好久不用生疏,在這里記下,供剛開(kāi)始學(xué)習(xí)jquery的童鞋們借鑒,我也是剛開(kāi)始學(xué)jquery,有什么寫的不對(duì)的地方,還請(qǐng)大家指出錯(cuò)誤,共同進(jìn)步。2011-08-08jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
jquery其實(shí)是有個(gè)進(jìn)度條插件的,叫做jqueryprogressbar.js,可是想練習(xí)一下,就沒(méi)有用,自己寫了點(diǎn)代碼。這個(gè)代碼其實(shí)是參考別人的,因?yàn)樽约旱腏S基礎(chǔ)不是很好。2010-03-03jquery點(diǎn)擊頁(yè)面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點(diǎn)十字效果
鼠標(biāo)點(diǎn)擊聚焦,地圖定位,在圖片上突出顯示,焦點(diǎn)定位頁(yè)面元素,這些都是在系統(tǒng)開(kāi)發(fā)是經(jīng)常需要用到的,下面為大家介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下哈2013-06-06jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對(duì)象到服務(wù)端及contentType的用法,結(jié)合實(shí)例形式分析了jQuery使用ajax傳遞json對(duì)象數(shù)據(jù)及服務(wù)器響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題分析
這篇文章主要介紹了jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題,結(jié)合實(shí)例對(duì)比分析了jQuery的ajax調(diào)用中出現(xiàn)的時(shí)間差賦值問(wèn)題原因與解決方法,需要的朋友可以參考下2016-01-01jquery 注意事項(xiàng)與常用語(yǔ)法小結(jié)
jquery 注意事項(xiàng)與常用語(yǔ)法小結(jié),學(xué)習(xí)jquery的朋友最好收藏下。2010-06-06