跟我一起学写jQuery插件开发方法(附完整实例及下载)


Posted in Javascript onApril 01, 2010

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好。而前端开发过程中,JavaScript技能又是必不可少的。所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:“嗨,美女,用这个吧。这是我写的一个jQuery插件。”我想基本上你的人生大事就能很快解决。
先想好做个什么功能
这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些。不要想一口就吃个胖子,咱也吃不了。咱还是捡个瘦的下手吧。但是,这个功能也不能太无聊,如果无聊到几乎没用处,就算做好了也是扔到马桶里,不会持续更新,也便不会持续进步了。
我最终选择的是:美化表格,让表格的奇偶行颜色不同,然后鼠标移到某行上,某行可以高亮显示。功能简单又实用,不错,不错。呵呵~~
不急着写,先想想实现原理
还不急,先想想实现原理。必要的时候,先写出简单的实现的原型。
我的这个美化表格的例子,实现原理倒是简单,无非就是找到表格的奇偶行,然后添加不同的class,活动行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再去掉这个class即可。
一个通用的框架
在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。

(function($){ 
$.fn.yourName = function(options){ 
//各种属性、参数 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//插件实现代码 
}); 
}; 
})(jQuery);

有了这个,咱就可以往里面套东西了。
名号、参数和属性
好不容易开始闯荡江湖了,一定要有一个响亮的名号才行,这样走在江湖上,才能够?牛?煌?纭2恍牛?闾??思摇爸泄?婪雷椤保∷?裕?壅饫镆欢ㄒ?鸶鱿炝恋拿?牛?欢ㄒ?虻ァ⒚髁恕⒐蝗ㄍ?K?裕?龆?耍?徒凶觥?ableUI”了!
参数和属性也很简单,无非就是三个class的名称。就叫做:evenRowClass、oddRowClass和activeRowClass吧。
所以,上面的框架,咱就把上半身给填上了。
(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//实现代码 
}); 
}; 
})(jQuery);

这里重点说一下这一句:
var options = $.extend(defaults, options);

看上去很?诺囊痪洌?涫稻褪呛喜⒍喔龆韵笪?桓觥U饫锞褪牵?绻?阍诘饔玫氖焙蛐戳诵碌牟问??陀媚阈碌牟问??绻?挥行矗?陀媚?系牟问?O虢?徊搅私獾呐笥眩?梢圆慰?query的官方文档: http://api.jquery.com/jQuery.extend/

开始下半身吧
ok,上半身填补完了,咱就可以填补下半身吧。无非就是找到基数行和偶数行(感谢jQuery提供了类似tr:even这种写法,使其及其简单),然后添加上相应的class。然后再给所有的tr,绑定mouseover和mouseout事件即可。下半身代码如下:

(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var thisTable=$(this); 
//添加奇偶行颜色 
$(thisTable).find("tr:even").addClass(options.evenRowClass); 
$(thisTable).find("tr:odd").addClass(options.oddRowClass); 
//添加活动行颜色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery);

最重要的一步!
也许有些朋友觉得这样就算是完成了。但是切切相反,我们还有最重要的一步没有完成,那就是一定要在插件上方,写上插件的名称、版本号、完成日期、作者,作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。
/* 
* tableUI 0.1 
* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/ 
* Date: 2010-03-30 
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示 
*/ 
(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var thisTable=$(this); 
//添加奇偶行颜色 
$(thisTable).find("tr:even").addClass(options.evenRowClass); 
$(thisTable).find("tr:odd").addClass(options.oddRowClass); 
//添加活动行颜色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery);

演示地址

实例下载地址

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #Javascript
基于jquery的tab切换 js原理
Apr 01 #Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 #Javascript
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php集成动态口令认证
2016/07/21 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
javascript新手语法小结
2008/06/15 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
react redux入门示例
2018/04/19 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
JS闭包原理与应用经典示例
2018/12/20 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Python logging模块用法示例
2018/08/28 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书