插件选项卡幻灯片免费素材下载 verticalTab

程度选项卡我想各人见患上多了，网上的此类的jquery插件也不少，但竖型选项卡方面的插件却十分少，其实竖型选项卡的使用场所也很多，比方RIA之家的首页的幻灯片局部，其实也能够算是竖型选项卡。明河花了几个早晨的工夫，写了这个jquery竖型选项卡插件，我将其定名为：verticalTab
应用教程1、内容层切换
请关上示例包中demo-36ria文件夹下的index.html阅读。
一、引入须要的js以及css

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.verticalTab.js"></script>
<link href="../style/css/base.css" rel="stylesheet" type="text/css" />
<link href="css/36ria.css" rel="stylesheet" type="text/css" />

示例包中还引入了jquery.easing.1.3.js这个动画缓动插件，并不是是必需的。
二、构建相似以下的html构造

<div class="mar-t-10 clearfix" id="ria-home">
<div class="l" id="ria-home-titles">
<ul>
<li>相干文章</li>
<li>最新文章</li>
<li>最热文章</li>
</ul>
</div>
<div class="l" id="ria-home-contents">
<ul>
<li>
<ul class="post-title-list">
<li>
<a href="//www.ria-home.com/2058">应用jquery制造仿Skype的动画按钮</a>
</li>
.......

</ul>
</li>
<li>
<ul class="post-title-list">
<li>
<a href="//www.ria-home.com/2058">应用jquery制造仿Skype的动画按钮</a>
</li>
.......

</ul>

</li>
<li>
<ul class="post-title-list">
<li>
<a href="//www.ria-home.com/2058">应用jquery制造仿Skype的动画按钮</a>
</li>
.......

</ul>
</li>
</ul>
</div>
</div>

看似代码挺多的，其实构造很简略，#ria-home为总的容器，#ria-home-titles为选项卡题目容器，#ria-home-contents为选项卡内容容器，两者的子容器为一个ul为真实的内容容器。
三、初始化插件

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

阐明下这里的几个参数：

titlesApplyTo ：为选项卡题目局部的容器工具名
contentsApplyTo : 为选项卡内容局部的容器工具名
currentTitleCls ：为以后的选项卡上题目的款式
animateType ：动画成果类型，默许为fade（滑动），这里设置为渐隐
2、竖型选项卡使用于幻灯片
请关上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。
一、设置主动切换幻灯片

VT.setAuto(true | false);

二、猎取幻灯片能否主动切换

VT.auto

三、扭转切换提早工夫

VT.delay = XXXX;

四、扭转选项卡切换事情

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

会没有会感觉切换成果太枯燥？接上去来看增强切换成果的幻灯片。

3、幻灯片gird格子殊效使用
请关上demo-xunlei/gird-animate.html阅读。
一、引入gird-animate动画插件

<script type="text/javascript" src="../js/yijs.GridAnimate.js"></script>

4个早晨写verticalTab，至多有3个早晨是正在写这个动画成果类，今朝完成的成果有6个：从上至下、从下至上、从左至右、从右至左、从左上角到右下角、随机格子，当前将退出更多成果。
二、实例化yijs.GridAnimate

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

三、正在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，假如你正在应用进程遇到成绩，或发现成绩，均可以给明河留言，明河将一直改良这个插件，谢谢！