自己动手制作jquery插件之自动添加删除行的实现
更新时间：2011年10月13日 23:30:20 作者：
我们常常会遇到这样的情况，一个系统中有大量的需要对一个行进行复制添加，希望能够进行批量的操作，这个时候，我们就可以考虑把它做成一个jquery插件了.
效果图如下，演示地址请点击
既然是插件，那就应该可以使用$("div").method({})这样的jquery写法来调用，它的做法是:
(function($) {
})(jQuery);
然后给插件命名:
这样我们就可以在页面里用$(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就是我要复制的模版行，后面的就很好理解了；
由于时间关系，今天就到这吧，明天会详细说明这些功能是如何实现的。
既然是插件，那就应该可以使用$("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就是我要复制的模版行，后面的就很好理解了；
由于时间关系，今天就到这吧，明天会详细说明这些功能是如何实现的。
相关文章
为了防止以后好久不用生疏，在这里记下，供刚开始学习jquery的童鞋们借鉴，我也是刚开始学jquery，有什么写的不对的地方，还请大家指出错误，共同进步。2011-08-08
jquery其实是有个进度条插件的，叫做jqueryprogressbar.js，可是想练习一下，就没有用，自己写了点代码。这个代码其实是参考别人的，因为自己的JS基础不是很好。2010-03-03
这篇文章主要介绍了利用浏览器全屏api实现js全屏的代码示例,示例中使用了jquery，把这个库的地址改成自己的，大家参考使用吧2014-01-01
鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素，这些都是在系统开发是经常需要用到的，下面为大家介绍下具体的实现，感兴趣的朋友可以参考下哈2013-06-06
jQuery使用ajax传递json对象到服务端及contentType的用法示例
这篇文章主要介绍了jQuery使用ajax传递json对象到服务端及contentType的用法,结合实例形式分析了jQuery使用ajax传递json对象数据及服务器响应相关操作技巧,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了jQuery ajax时间差导致的变量赋值问题,结合实例对比分析了jQuery的ajax调用中出现的时间差赋值问题原因与解决方法,需要的朋友可以参考下2016-01-01
在用jquery加ajax写的时候，发现如果传进去的数据包含&则无法获取数据而+号的话就会被判定为空，解决办法就是使用encodeURIComponent()函数对要发送的数据进行编码,需要的朋友可以参考下2017-01-01
jquery 注意事项与常用语法小结,学习jquery的朋友最好收藏下。2010-06-06
本文给大家汇总了2014年最热门的9款jQuery特效插件，小伙伴们根据自己的需求直接带走吧。2014-12-12
jQuery function想必大家都不会陌生，web前端开发人员经常会接触到，下面为大家介绍下它的正确书写方法，感兴趣的朋友可以参考下2013-08-08
最新评论