当前位置: 首页 > 素材下载 > 脚本代码 > 焦点图 > 基于jquery竖型选项卡插件

基于jquery竖型选项卡插件

焦点图
  • 源码大小:226KB
  • 源码语言:简体中文
  • 源码类型:国产软件
  • 源码授权:免费软件
  • 更新时间:2020-08-01
  • 应用平台:jquery
  • 开 发 商:
  • 程序演示:Demo Url
  • 软件等级:3
  • 下载次数:
基于jquery竖型选项卡插件
内容介绍人气软件相关文章下载地址↓

基于jquery竖型选项卡插件

基于jquery竖型选项卡插件水平选项卡我想大家见得多了,网上的此类的jquery插件也很多,但竖型选项卡方面的插件却非常少,其实竖型选项卡的应用场合也不少,比如RIA之家的首页的幻灯片部分,其实也可以算是竖型选项卡。明河花了几个晚上的时间,写了这个jquery竖型选项卡插件,我将其命名为:verticalTab使用教程一、内容层切换 请打开示例包中demo-36ria文件夹下的index.html浏览。 1、引入必要的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这个动画缓动插件,并非是必须的。 2、构建类似如下的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为真正的内容容器。 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动画插件 <script type="text/javascript" src="../js/yijs.GridAnimate.js"></script> 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,如果你在使用过程遇到问题,或发现问题,都可以给明河留言,明河将不断改进这个插件,谢谢!

人气软件
基于jquery竖型选项卡插件下载地址
相关文章

网友评论

下载声明

☉解压密码:如需要解压密码down.easck.com 就是本站主域名,希望大家看清楚。
☉如果源码不能下载请QQ:279390809留言,我们会尽快修复,谢谢!
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!或者多试试几个下载地址
☉如果遇到什么问题,请QQ:279390809留言,我们定会解决问题,谢谢大家支持!
☉本站提供的一些商业源码是供学习研究之用,如用于商业用途,请购买正版。
☉本站提供的天人短文网站系统(带手机版)资源来源互联网,版权归该下载资源的合法拥有者所有。

关于我们 - 联系我们 - 广告服务 - 版权声明 - 人才招聘 - 友情链接 - 网站地图 - 帮助 - -

CopyRight © 2010-2016 源码下载 easck.com , All Rights Reserved

蒙公网安备 15052402000103号

蒙ICP备14002389-1号