自己动手制作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 相关文章推荐
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
解读ES6中class关键字
Nov 20 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
javascript canvas实现雨滴效果
Jun 09 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
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jquery处理json对象
2014/11/03 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python网络编程之数据传输UDP实例分析
2015/05/20 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
pytest中文文档之编写断言
2019/09/12 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python中二分查找法的实现方法
2020/12/06 Python
详解python中的异常和文件读写
2021/01/03 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
建筑工程技术应届生自荐信
2013/09/27 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
财务统计员岗位职责
2015/04/14 职场文书
博物馆观后感
2015/06/05 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python