自己动手制作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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
ie和firefox中img对象区别的困惑
Dec 27 Javascript
分页栏的web标准实现
Nov 01 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
动态加载js文件简单示例
Apr 21 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
使用jQuery实现购物车
Oct 29 jQuery
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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
自动分页的不完整解决方案
2007/01/12 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php制作文本式留言板
2015/03/18 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
Javascript UrlDecode函数代码
2010/01/09 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python自动生成model文件过程详解
2019/11/02 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python如何调用百度识图api
2020/09/29 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
学生自我鉴定
2013/12/18 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
挂靠协议书
2015/01/27 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
珍爱生命主题班会
2015/08/13 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书