自己动手制作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 相关文章推荐
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
vue实现数字滚动效果
Jun 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 开发工具
2006/12/06 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
开发用到的js封装方法(20种)
2018/10/12 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中bisect的用法
2014/09/23 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
《难忘的泼水节》教学反思
2014/02/27 职场文书
创业计划书之面包店
2019/09/12 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
golang 语言中错误处理机制
2021/08/30 Golang