自己动手制作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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
document.compatMode介绍
May 21 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 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
基于文本的留言簿
2006/10/09 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
python2.7到3.x迁移指南
2018/02/01 Python
python绘图模块之利用turtle画图
2021/02/12 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
创先争优活动方案
2014/02/12 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
远程培训的心得体会
2014/09/01 职场文书
初中地理教学反思
2016/02/19 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python