自己动手制作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就是我要复制的模版行，后面的就很好理解了；
由于时间关系，今天就到这吧，明天会详细说明这些功能是如何实现的。
相关文章
上文介绍了利用$函数筛选页面上的元素和替代onload事件。$函数还有一个作用，当它的参数是一个HTML片段的时候，它返回的是包含这个HTML元素的包装集。2010-03-03
这篇文章主要为大家详细介绍了jquery.jsPlumb实现拓扑图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了jQuery实现鼠标移入显示蒙版效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
轻松学习jQuery插件EasyUI，本文的重点在于EasyUI表单验证，并告诉大家如何提交表单，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了jQuery实现切换字体大小的方法,实例分析了jQuery操作字体css样式的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery实现ajax无刷新分页页码控件,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了jQuery中:checkbox选择器用法,实例分析了:checkbox选择器的功能、定义及匹配复选框的使用技巧,需要的朋友可以参考下2015-01-01
本文给大家介绍的是使用jQuery实现仿路边灯箱广告图片轮播切换特效，效果非常棒，有需要的小伙伴可以参考下。2015-04-04
JQuery 应用 JQuery.groupTable.js
在以往的项目中，数据浏览用的都table 的形式展现。如下图1， 这是一个很常见的表格。通常对分类的字段先进行排序。为了让分类表现的更直观。2010-12-12
有时我们需要动态的展示访问次数、下载次数等效果，我们可以借助jQuery结合后台php实现一个滚动的数字展示效果。2015-08-08
最新评论