自己动手制作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去除空格的几种方法
Oct 03 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 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
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
wxPython 入门教程
2008/10/07 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python实现密码薄文件读写操作
2019/12/16 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Python中qutip用法示例详解
2020/10/02 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
2014年教师节寄语
2014/04/03 职场文书
政风行风评议整改方案
2014/09/15 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
英语复习计划
2015/01/19 职场文书
《司马光》教学反思
2016/02/22 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers