自己动手制作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语句可以不以;结尾的烦恼
Mar 08 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
JsRender for object语法简介
Oct 31 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
node.js从数据库获取数据
May 08 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 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
PHP5 安装方法
2006/10/09 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php 购物车完整实现代码
2014/06/05 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript 写类方式之三
2009/07/05 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python按比例随机切分数据的实现
2019/07/11 Python
Django如何实现上传图片功能
2019/08/16 Python
python写一个随机点名软件的实例
2019/11/28 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
转让协议书范本
2014/04/15 职场文书
新人入职感言
2015/07/31 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python