自己动手制作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 闭包深入理解(closure)
May 27 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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递归调用删除数组空值元素的方法
2015/04/28 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
详解参数传递四种形式
2015/07/21 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
javascript常用函数(1)
2015/11/04 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
jupyter 导入csv文件方式
2020/04/21 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python sublime安装及配置过程详解
2020/06/29 Python
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
分层教学实施方案
2014/03/19 职场文书
大班幼儿评语大全
2014/04/30 职场文书
电子信息工程自荐信
2014/05/26 职场文书
班训口号大全
2014/06/18 职场文书
幼师小班个人总结
2015/02/12 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL