前言
本人目前在杭州世翔信息技术有限公司担任前端工作，隶属于网建部，大多时间是在制作企业网站（偶尔开发大型项目），经常要用到tab选项卡、slide焦点图、无缝滚动、banner切换、等高等等的js功能or特效。
刚开始时，不会js，网上找代码来用(懒人图库和懒人建站是不错的网站哦)；之后看了《javascript DOM编程艺术》学会了自己写，就不用网上的代码了，觉得网上的代码不干净，还是用自己的舒服，同时可以锻炼自己的js水平；再后来完看了《锋利的jQuery》开始用jquery做各种特效（相对于js来说真心方便- -）。
企业网站要用到js功能其实大多数就是前面提到的这些，反复复制使用原先写的代码，为什么不自己写个插件只要输入参数就好呢？于是，我开始写自己的插件库。目前我的插件库里写了tab选项卡插件、slide焦点图插件、Equal等高插件、Odevity隔行变色、兼容HTML5-placeholder属性、ScrollTo滚动跳转，后续会不断增加新功能的。
Ps：我们公司的英文名称是cenvol，所以插件名称同名。
Tab选项卡
jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。
Tab选项卡是基于jQuery本身拓展的功能。
它的默认参数是：
oTab:"#tab", //tab选项卡的容器（父级） sTabChildren:"a", //tab选项卡 oTabMain:"#tabMain", //tab内容区的容器（父级） sTabMainChildren:"ul", //tab内容区 sClass:"current", //选中样式 sEvent:"click", //tab选项卡切换的触发事件 sEarliest:true, //是否执行初始化显示 iStart:0, //最先显示的选项卡 fnAdditional:"" //追加方法
假如我们有这样的页面：
<div id="tab"><a>1</a><a>2</a><a>3</a></div>
<div id="tabMain">
<ul>
<li>内容一</li>
</ul>
<ul>
<li>内容二</li>
</ul>
<ul>
<li>内容三</li>
</ul>
</div>
跟默认值相完全符合，直接写$.tab()就能生效了。见案例：
http://sandbox.runjs.cn/show/himra3nx
但是我们不可能每次html结构都是这样的，当遇到结构不同的时候就需要对参数进行修改（不要跑到插件内部去修改，因为它还有可能在其它地方被调用）。这时候我们就要这样写：
$.tab({
oTab:"#tab", //tab选项卡的容器（父级）
sTabChildren:"a", //tab选项卡
oTabMain:"#tabMain", //tab内容区的容器（父级）
sTabMainChildren:"ul", //tab内容区
sClass:"current", //选中样式
sEvent:"click", //tab选项卡切换的触发事件
sEarliest:true, //是否执行初始化显示
iStart:0, //最先显示的选项卡
fnAdditional:"" //追加方法
});
可以只写要修改的部分（各参数都对应了相应的注释，只要按照注释修改就可以了），其它依旧按照默认值，比如:
$.tab({
sTabMainChildren:"dl",
sEvent:mouseover
})
注意，参数之间的分割是“,” 。末尾的参数不要加标点符号！不然现代浏览器下正常、低版本浏览器（IE6 \ 7）会报错且代码无效！
其中最后面的追加方法（fnAdditional）要特别介绍一下，这个是一个拓展的方法。原本插件功能是写死的，但是有了追加方法，它可以让它活起来。比如：
$.tab({
sTabMainChildren:"dl",
sEvent:mouseover,
fnAdditional:function(){
alert("123");
}
})
它会在插件被调用时被触发，也会在你鼠标事件触发时触发（这里可以理解为回调函数）。有时候我们通过js做的两栏等高布局的页面，tab选项卡切换后，新显示的tab主体太高结果把其中一栏给撑开，或者被溢出隐藏了。这时候就可以用追加方法了。在使用ajax的时候也同样适用。
在后面的很多插件功能中都有追加方法这个参数，它让插件功能更加灵活。
Slide焦点图
Slide焦点图也是基于jQuery本身拓展的功能。
它的默认参数是：
oSlide:"#slide", //焦点图内容容器 oSlideChildren:"li", //焦点图内容 oSlideList:"#SlideList", //焦点图列表容器 oSlideListChildren:"a", //焦点图列表 sClass:"current", //选中样式 sEvent:"mouseenter", //焦点图切换的触发事件 bAuto:true, //需要自动切换吗 iSpeed:3000, //自动切换的速度 iNumber:0, //首先显示的图片编号 bDrChoose:true, //是否淡入淡出 ichangeSpeed:1000, //渐变速度 bHover:true, //是否启动鼠标移入时停止切换 fnAdditional:"" //追加方法
同样的假如插件的默认值和页面的html结构相完全符合，直接写$.Slide()就能生效了。但是如果不一样，可以通过调用插件，进行局部的修改(如下)，只需要改要改变的地方即可。
$.slide({
sClass:"click", //选中样式
bAuto:true, //需要自动切换吗
iSpeed:5000 //自动切换的速度
});
假如说我们给bAuto参数设置了fasle，事实上下面的iSpeed是不用填写的，你都不用自动切换了，还要切换速度干嘛？插件中有很多地方会有这样相关联的参数，看备注应该没什么问题吧？
这里的追加方法是页面切换一次调用一次。使用方式如tab选项卡。
Equal等高插件
Equal等高插件是让某个对象下面的元素进行等高的插件，最终的高度统一按照元素中最大高度进行赋值。
与前面的tab选项卡和slide焦点图插件不同，它是对象级别的插件。调用方式有所不同，如下：
$("#idName").equal();
这里的#idName是需要等高的元素的上级元素（可以是父亲也可以是祖父、只要辈分比它大就能执行到）。这里的equal()就是调用插件，它里面有两个默认参数，上面的写法只是在和默认参数相符合的情况下有效。多数情况下是需要修改参数的，参数如下：
oEqualSon:new Array(".layoutSmall",".layoutBig"), //需要匹配高度的元素数组
fnAdditional:""
默认需要匹配高度的是 父级元素下的.layoutSmall和.layoutBig两个元素。因为oEqualSon是数组，所以这里输入参数有两种形式：
//oEqualSon 调用形式1
$("#idName").equal({
oEqualSon:new Array(".a",".b",".c"),
fnAdditional:""
});
//oEqualSon 调用形式2
$("#idName").equal({
oEqualSon:[".a",".b",".c"],
fnAdditional:""
});
结果是一样的，都是让id为idName的对象下面的.a\.b\.c三个元素统一高度。
这里的追加方法是在元素高度赋值之后执行。使用的情况最多的是，a元素的高是100px，b元素的高也是100px但是它上下各有1px的边，这个时候就需要在赋值高度结束后，再对这个高度进行-2px的处理。注：如果不处理高度分别是100px、102px。
Cenvol插件中所有对象级别的插件都是可以进行链式结构的，它们最后都会返回$(this)，即调用插件的对象。
跟普通的jquery语法一样，你可以：
var idNameHtml=$("#idName").equal().html();
Odevity隔行变色插件
Odevity隔行变色插件是让某个对象下面的元素按照基数，进行添加class的操作。最原先它为了实现表格的隔行变色而写的，后来对其进行了功能拓展。
它也是对象级别的插件，因此调用方式如下：
$("#idName").odevity();
#idName是需要进行隔行添加样式的元素的父级。插件的默认参数如下：
oChange:"tr", //需要被匹配的元素 iBase:2, //基数 bZero:true, //是否从1开始计数,否则从0开始 sClass:"even" //应用的class
从默认参数看出，它的默认设置是用来做表格的奇偶数换行的。给table中偶数的tr添加even样式。如下：
$("table").odevity();
我们平时对奇偶数的理解是第一行是奇数、第二行是偶数、第三行是奇数，但是在jquery中元素编号是从0开始计数的，也即使说：第一行偶数、第二行奇数、第三行偶数，跟我们正常的理解方式正好相反。
插件中对这个问题进行了修正，默认情况下元素是从1开始计数的，假如需要从0开始计数，把bZero参数设为false就可以了。
这个插件的功能不止于此，前面说过后来有对插件进行了功能拓展。这个拓展使Odevity奇偶数插件不在局限于表格的奇偶数换行，我们可以隔N元素个添加class，只要修改iBase参数，这个参数就是需要隔几行添加class的意思，如果想要添加其它的class样式，可以修改插件的sClass属性。
做企业网站时，经常要做到这样的页面：
为了使UL下所有li并排，于是给每个Li写了左浮动(float:left)；为了给所有LI增加边距又写了右外边距(margin-right:?px)。但是每行的最后一个LI我们不想给他添加右边距怎么办？这个时候就需要用到插件的隔行添加样式的功能了，以上图为例，代码如下：
$("ul").odevity({
oChange:"li", //需要被匹配的元素
iBase:3, //基数
bZero:true, //是否从1开始计数,否则从0开始
sClass:"last" //应用的class
});
每三个添加一个名为last的样式，这个样式中我写了margin-right:0;把每行最后一个元素的右边距取消了。
兼容HTML5-placeholder属性
IE10以下都不支持html5的placeholder属性，ie10和FF对placeholder的展现方式和谷歌也有所不同。occupied插件就是为了兼容placeholder属性而写的，它是一个对象级别的插件。
html5的placeholder属性是什么？有什么用？w3school对其解释如下：
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
本博客的左侧搜索框就用到了placeholder属性。除了搜索框，在登录界面也经常用到，如下图
调用这个插件的方式很简单，只需要给定需要匹配的表单元素的父级就可以了，无需输入任何参数。调用方式如下：
$("form").occupied();
跟前面的对象级别的插件一样，调用之后依然可以使用链式结构进行其它操作。
ScrollTo滚动跳转
网页中经常要用到返回顶部的功能，于是就写了ScrollTo插件，它不仅可以返回顶部还可以跳转到任意元素的位置(可以用来做楼层跳转)。它是一个对象级别的插件，参数如下：
oFinish:"body", //要滚动到的元素 iSpeed:"500", //滚动速度 fnAdditional:"" //追加方法
默认是滚动到body元素的起点坐标，也就是网页顶部。调用方式如下:
$("#btn").scrollTo();
当点击id为btn的元素，滚动到网页导航，速度为500毫秒。如需滚动到指定元素，只需要修改相应的参数，如下：
$("#btn").scrollTo({
oFinish:"#nav", //要滚动到的元素
iSpeed:"500", //滚动速度
fnAdditional:"" //追加方法
});
当点击id为btn的元素，将会滚动到id为nav的元素。
这里的追加方法，是在滚动结束后执行的方法。
在线地址：http://tet.cenvol.com/jquery.cenvol.js
下载地址：http://pan.baidu.com/share/link?shareid=1530613647&uk=3221702211