自己动手制作jquery插件之自动添加删除行的实现


Posted in Javascript onOctober 13, 2011

效果图如下,演示地址请点击

自己动手制作jquery插件之自动添加删除行的实现

既然是插件,那就应该可以使用$("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就是我要复制的模版行,后面的就很好理解了;
由于时间关系,今天就到这吧,明天会详细说明这些功能是如何实现的。
Javascript 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 #Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 #Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 #Javascript
Javascript insertAfter() 实现函数代码
Oct 12 #Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 #Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 #Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 #Javascript
You might like
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
pm2启动ssr失败的解决方法
2019/06/29 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
详解Vite的新体验
2021/02/22 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
static关键字的用法
2013/10/07 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
项目合作意向书模板
2014/07/29 职场文书
个性与发展自我评价
2015/03/06 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
公司奖励通知
2015/04/21 职场文书
党员转正党支部意见
2015/06/02 职场文书
岁月神偷观后感
2015/06/11 职场文书
春季运动会加油词
2015/07/18 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers