自己动手制作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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
解决vue addRoutes不生效问题
Aug 04 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下判断网址是否有效的代码
2011/10/08 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Django多数据库联用实现方法解析
2020/11/12 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
自我鉴定模板
2013/10/29 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
党员廉政准则心得体会
2016/01/20 职场文书