自己动手制作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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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常用的安全过滤函数集锦
2014/10/09 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Prototype Object对象 学习
2009/07/12 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python去掉行尾的换行符方法
2017/01/04 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
对pandas中Series的map函数详解
2018/07/25 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python chardet库识别编码原理解析
2020/02/18 Python
如何理解python中数字列表
2020/05/29 Python
树莓派升级python的具体步骤
2020/07/05 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
J2EE面试题大全
2016/08/06 面试题
物业工作计划书
2014/01/10 职场文书
小小的船教学反思
2014/02/21 职场文书
干部考核评语
2014/04/29 职场文书
导游词之唐山景点
2019/12/18 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Golang 遍历二叉树
2022/04/19 Golang