verticalTab V0.12 基于jquery竖型选项卡插件（明河作品） 下载-

水平选项卡我想大家见得多了，网上的此类的jquery插件也很多，但竖型选项卡方面的插件却非常少，其实竖型选项卡的应用场合也不少，比如RIA之家的首页的幻灯片部分，其实也可以算是竖型选项卡。明河花了几个晚上的时间，写了这个jquery竖型选项卡插件，我将其命名为：verticalTab
使用教程一、内容层切换
请打开示例包中demo-36ria文件夹下的index.html浏览。
1、引入必要的js和css






示例包中还引入了jquery.easing.1.3.js这个动画缓动插件，并非是必须的。
2、构建类似如下的html结构



看似代码挺多的，其实结构很简单，#ria-home为总的容器，#ria-home-titles为选项卡标题容器，#ria-home-contents为选项卡内容容器，二者的子容器为一个ul为真正的内容容器。
3、初始化插件

$("#ria-home").verticalTab({titlesApplyTo:"#ria-home-titles",
contentsApplyTo : "#ria-home-contents",
currentTitleCls : "ria-home-current-title",
animateType : "fade"});

说明下这里的几个参数：

titlesApplyTo ：为选项卡标题部分的容器对象名
contentsApplyTo : 为选项卡内容部分的容器对象名
currentTitleCls ：为当前的选项卡上标题的样式
animateType ：动画效果类型，默认为fade（滑动），这里设置为渐隐
二、竖型选项卡应用于幻灯片
请打开demo-xunlei的index.html浏览。

在这个demo中明河不仅仅演示了简单的幻灯片切换，还演示了verticalTab的一些关键的API，比如自动切换，时间延迟等。
插件的引入和html的创建与上一个例子没什么区别，明河不再累述，重点来看插件的调用和API的使用。
插件初始化，并获取插件API接口

var VT = $("#xunlei-images-slide").verticalTab({titlesApplyTo:"#xunlei-images-slide-titles",
contentsApplyTo : "#xunlei-images-slide-contents",
currentTitleCls : "xunlei-images-slide-current-title",
auto:true})
.verticalTab("api");

留意与上一个demo的区别，在插件初始化结束后，加了个.verticalTab(“api”)获取verticalTab的API接口，然后赋值于VT。
1、设置自动切换幻灯片

VT.setAuto(true | false);

2、获取幻灯片是否自动切换

VT.auto

3、改变切换延迟时间

VT.delay = XXXX;

4、改变选项卡切换事件

VT.setChangeEvent("mouseover" | "click" | "dblclick");

会不会觉得切换效果太单调？接下来来看加强切换效果的幻灯片。

三、幻灯片gird格子特效应用
请打开demo-xunlei/gird-animate.html浏览。
1、引入gird-animate动画插件



4个晚上写verticalTab，至少有3个晚上是在写这个动画效果类，目前实现的效果有6个：从上至下、从下至上、从左至右、从右至左、从左上角到右下角、随机格子，以后将加入更多效果。
2、实例化yijs.GridAnimate

var GA = new yijs.GridAnimate({});

3、在verticalTab插件中增加这个gird动画

var VT = $("#xunlei-images-slide").verticalTab({titlesApplyTo:"#xunlei-images-slide-titles",
contentsApplyTo : "#xunlei-images-slide-contents",
currentTitleCls : "xunlei-images-slide-current-title",
animateType : "grid",
animatePlugin : {
"grid" : GA
}})
.verticalTab("api");

animateType 设置为grid，然后将GA赋值于animatePlugin["grid"]。

verticalTab的所有方法、属性、事件，明河下周将发个汇总表格。

关于verticalTab，如果你在使用过程遇到问题，或发现问题，都可以给明河留言，明河将不断改进这个插件，谢谢！