一个通用的框架 一个通用的框架
在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。
复制代码 代码如下:
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);
有了这个,咱就可以往里面套东西了。
名号、参数和属性
好不容易开始闯荡江湖了,一定要有一个响亮的名号才行,这样走在江湖上,才能够屌,够威风。不信,你听听人家“中国牙防组”!所以,咱这里一定要起个响亮的名号,一定要简单、明了、够权威。所以,决定了,就叫做“tableUI”了!
参数和属性也很简单,无非就是三个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);
看上去很屌的一句,其实就是合并多个对象为一个。这里就是,如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。想进一步了解的朋友,可以参考jquery的官方文档: 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);
详细出处参考:http://www.jb51.net/article/22849.htm
分享到:
相关推荐
Android 通用框架大全 Android 通用框架大全 Android 通用框架大全
在csdn一篇博客中看到文章Winform通用框架之权限管理系统,但是只有文章没有源码就是耍流氓。于是自己写了出来,可用于所有管理系统的开发框架。 软件的整体主页布局是用到了WeifenLuo.WinFormsUI.Docking;的可拖拉...
该系统是一个简单实用的二次开发框架,内置了完整的权限架构,包括菜单、角色、用户、字典、日志和代码生成等系统常规模块。该框架旨在帮助一般管理系统避免重复造轮子,开发者只需关注新增功能的form界面和业务逻辑...
当涉及训练预模型时,有一个通用框架可以帮助我们快速构建和训练模型。这个框架可以适用于各种下游任务,并且易于定制和扩展。在本文中,我们将介绍这个通用框架的不同部分,并说明如何使用它来训练自己的模型。
.NET网站通用框架源码 、
此框架还有一个自动更新模块,可以自行拿来使用,在以后的商用过程中,可以用来更新系统,最后此框架是将整个系统模块化处理了,方便使用者,后期对代码的修改。然后本系统内已经实现了日常办公生活中所有的功能,...
软件版本是LabVIEW2018 32位,安装好NI VISION和VAS.
java系统通用框架 主要是jframe的应用
A.通用框架_99.9.9.apk
开源通用的应用程序框架
简介:基于VisionPro的通用视觉框架平台 基于VisionPro 只需要配置通信,不需要写外部代码 通过绑定工位设置 通讯设置 实现自由通讯 自由显示 自由输入内容 支持最多10个TCP服务端,10个TCP客户端,10个串口(可...
WPF 通用权限开发框架,压缩包中有代码以及相关说明文档;完整的实战项目案例,可供学习和用于实际项目
JAVA通用开发框架(Java Common Development Framework,简称JCDF)是基于J2EE(Java2 platform, Enterprise Edition)开发平台,面向企业的分布式开发框架。JCDF集中JSP(Java Server Pages),Servlets,EJB...
一款非常漂亮通用的easyui框架,里面有很多控件的演示
java系统通用框架Java源码.
机器学习通用框架
11004pb-oracle通用开发框架
ImportExport:ImportExport工具是一个通用框架,可以多种格式(例如CSV或XML)导入和导出对象(如票证或配置项)
MNVVisionCk,我花了几十块在咸鱼买的,在这里分享给大家,这个框架很好用,有停靠功能,有很多算子已经加进去了
ssh三大框架通用配置,任何ssh框架项目可以直接套用,包括增删改查,分页查询