自己动手制作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的两个ListBox子项互相调整的实现代码
May 07 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 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
天津市收音机工业发展史
2021/03/04 无线电
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
js中widow.open()方法使用详解
2013/07/30 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python对文件操作知识汇总
2016/05/15 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
详解python单元测试框架unittest
2018/07/02 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python安装gdal的两种方法
2019/10/29 Python
python with (as)语句实例详解
2020/02/04 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
C语言笔试题
2014/09/04 面试题
故意伤害辩护词
2015/05/21 职场文书
关于开学的感想
2015/08/10 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript