自己动手制作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 suggest效果 自动完成实现代码分享
Feb 17 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
jQuery侧边栏实现代码
May 06 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
js判断两个数组相等的5种方法
May 06 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函数使用小结
2008/10/11 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
详解JavaScript函数
2015/12/01 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python给list排序的简单方法
2020/12/10 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
探矿工程师自荐信
2014/01/24 职场文书
建筑个人求职信范文
2014/01/25 职场文书
会计岗位说明书
2014/07/29 职场文书
新教师培训心得体会
2014/09/02 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript