自己动手制作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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
Javascript数组及类数组相关原理详解
Oct 29 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利用str_replace防注入的方法
2013/11/10 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php批量删除操作代码分享
2017/02/26 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
人生苦短我用python python如何快速入门?
2018/03/12 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python做接口测试的必要性
2019/11/20 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
如何查找网页漏洞
2016/06/22 面试题
酒店中秋节活动方案
2014/01/31 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
社区食品安全实施方案
2014/03/28 职场文书
二人合伙经营协议书
2014/09/13 职场文书
学生检讨书怎么写
2015/05/07 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python