自己动手制作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 相关文章推荐
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
linux下编译安装memcached服务
2014/08/03 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
JS访问对象两种方式区别解析
2020/08/29 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python 自动补全(vim)
2014/11/30 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python列表的增删改查实例代码
2018/01/30 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
聚会通知怎么写
2015/04/23 职场文书
委托书范本格式
2019/04/18 职场文书
Python读写yaml文件
2022/03/20 Python