verticalTabV0.12基于jquery竖型选项卡插件(明河作品
日期:2012-01-25 20:58:11 来源:网络收集
水平选项卡我想大家见得多了,网上的此类的jquery插件也很多,但竖型选项卡方面的插件却非常少,其实竖型选项卡的应用场合也不少,比如RIA之家的首页的幻灯片部分,其实也可以算是竖型选项卡。明河花了几个晚上的时间,写了这个jquery竖型选项卡插件,我将其命名为:verticalTab
使用教程一、内容层切换
请打开示例包中demo-36ria文件夹下的index.html浏览。
1、引入必要的js和css
<scripttype="text/javascript"src="../js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../js/jquery.verticalTab.js"></script>
<linkhref="../style/css/base.css"rel="stylesheet"type="text/css"/>
<linkhref="css/36ria.css"rel="stylesheet"type="text/css"/>
示例包中还引入了jquery.easing.1.3.js这个动画缓动插件,并非是必须的。
2、构建类似如下的html结构
<divclass="mar-t-10clearfix"id="ria-home">
<divclass="l"id="ria-home-titles">
<ul>
<li>相关文章</li>
<li>最新文章</li>
<li>最热文章</li>
</ul>
</div>
<divclass="l"id="ria-home-contents">
<ul>
<li>
<ulclass="post-title-list">
<li>
<ahref="//www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
</li>
.......
</ul>
</li>
<li>
<ulclass="post-title-list">
<li>
<ahref="//www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
</li>
.......
</ul>
</li>
<li>
<ulclass="post-title-list">
<li>
<ahref="//www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
</li>
.......
</ul>
</li>
</ul>
</div>
</div>
看似代码挺多的,其实结构很简单,#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接口
varVT=$("#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动画插件
<scripttype="text/javascript"src="../js/yijs.GridAnimate.js"></script>
4个晚上写verticalTab,至少有3个晚上是在写这个动画效果类,目前实现的效果有6个:从上至下、从下至上、从左至右、从右至左、从左上角到右下角、随机格子,以后将加入更多效果。
2、实例化yijs.GridAnimate
varGA=newyijs.GridAnimate({});
3、在verticalTab插件中增加这个gird动画
varVT=$("#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,如果你在使用过程遇到问题,或发现问题,都可以给明河留言,明河将不断改进这个插件,谢谢!
使用教程一、内容层切换
请打开示例包中demo-36ria文件夹下的index.html浏览。
1、引入必要的js和css
<scripttype="text/javascript"src="../js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../js/jquery.verticalTab.js"></script>
<linkhref="../style/css/base.css"rel="stylesheet"type="text/css"/>
<linkhref="css/36ria.css"rel="stylesheet"type="text/css"/>
示例包中还引入了jquery.easing.1.3.js这个动画缓动插件,并非是必须的。
2、构建类似如下的html结构
<divclass="mar-t-10clearfix"id="ria-home">
<divclass="l"id="ria-home-titles">
<ul>
<li>相关文章</li>
<li>最新文章</li>
<li>最热文章</li>
</ul>
</div>
<divclass="l"id="ria-home-contents">
<ul>
<li>
<ulclass="post-title-list">
<li>
<ahref="//www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
</li>
.......
</ul>
</li>
<li>
<ulclass="post-title-list">
<li>
<ahref="//www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
</li>
.......
</ul>
</li>
<li>
<ulclass="post-title-list">
<li>
<ahref="//www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
</li>
.......
</ul>
</li>
</ul>
</div>
</div>
看似代码挺多的,其实结构很简单,#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接口
varVT=$("#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动画插件
<scripttype="text/javascript"src="../js/yijs.GridAnimate.js"></script>
4个晚上写verticalTab,至少有3个晚上是在写这个动画效果类,目前实现的效果有6个:从上至下、从下至上、从左至右、从右至左、从左上角到右下角、随机格子,以后将加入更多效果。
2、实例化yijs.GridAnimate
varGA=newyijs.GridAnimate({});
3、在verticalTab插件中增加这个gird动画
varVT=$("#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,如果你在使用过程遇到问题,或发现问题,都可以给明河留言,明河将不断改进这个插件,谢谢!
您可能感兴趣的脚本
菜单导航2013-02-27
菜单导航2009-05-04
菜单导航2010-07-13
焦 点 图2013-03-05
悬浮漂浮2010-05-18
菜单导航2017-04-18
焦 点 图2009-07-27
相册代码2009-05-20
菜单导航2011-08-25
在线客服2011-12-19
在线客服2014-04-15
图片特效2013-02-18
菜单导航2009-09-16
图片特效2010-05-23
相册代码2009-04-30
焦 点 图2014-12-04
菜单导航2010-07-20
相册代码2009-07-28
悬浮漂浮2010-09-03
图片特效2014-10-16
焦 点 图2009-11-09
菜单导航2015-01-04
悬浮漂浮2009-11-12
菜单导航2011-09-26