KandyTabs 选项卡插件

温馨提示：请通过点击来切换。

插件简介

通常情况下，Tab选项卡的默认结构都类似如下：

<div class="tab">
  <div class="tabtitle">
    <span>Tab 1</span>
    <span>Tab 2</span>
  </div>
  <div class="tabboy">
    <div class="tabcont">
      Tab 1 的内容
    </div>
    <div class="tabcont">
      Tab 2 的内容
    </div>
  </div>
</div>

表现出来就类似这样：

Tab 1Tab 2

Tab 1 的内容

Tab 2 的内容

一旦内容过多，标题和内容就会相距甚远，表意也就不准确了，谁知道那一段开始是另一部分内容呢？当然，这是在JS失效的前提下。但是蜘蛛并不知道你用了选项卡，对于它来说，这就是一片不连贯，读不通的“伪原创”（夸张了点…）。再者，考虑下手机用户吧，他们可能只看纯文本的内容。有没有恍然大悟呢？

OK，既然你恍然大悟的意识到了这一点，那么就一起加入我们吧。为了更佳的用户体验，你有理由选择 KandyTabs 。还没弄明白？那就看看代码结构吧。

P.S. 各个效果的具体使用方法请参看下方的演示，详细的教程会陆续推出，请关注吉光片羽的博客。

特点

KandyTabs 是一个基于标准Tab模式的JQuery Tab选项卡插件。有什么了不起的？查看源文件就知道了。或者禁用网页脚本看看？
KandyTabs 是一个符合HTML标准且绝对有利于SEO的JQuery Tab选项卡插件。
KandyTabs 是一个特别方便CMS类程序模板编写的选项卡插件，只需必要内容即可实现复杂的外观效果。
KandyTabs 是一个集合选项卡、幻灯片，折叠特效于一体的JQuery Tab选项卡插件。只需一个KandyTabs，你就可以轻松在网页中同时实现各种风格形式的Tab、Slide、fold应用。
支持无限嵌套。（再看看缺点）
支持在运行开始和结束时回调函数。
支持切换过程中自定义特效。

缺点

文件有点小大，最新压缩完后，kandytabs.js 还有7.59kb。
对于只需要简单TAB效果的朋友来说，插件有点臃肿。
~~插件会重构整个需要生成选项卡的元素，可能会影响页面加载效果或效率。~~
插件使用前和使用后的HTML元素需要重新定义CSS样式。
如果你真的要无限嵌套会有点累，所以不要太较真。

特色展望

增加样式选择配置，提供几种常用TAB界面。
支持Slide幻灯片功能，自动播放，悬停。√
支持前后按钮的切换。√
支持AJAX内容。
支持iframe内容。
支持增删tab。

展望的意思就是还没有实现的，所以别乱激动。

如何使用

很简单，使用 .KandyTabs() 到你的对象即可。如 $("div").KandyTabs() 。

从来没用过JQuery插件？那好吧……

因为是JQuery插件，所以我们要在插件之前导入JQuery（必须为1.4以上版本）库，并一同放在<header></header>之间，如下：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="kandytabs.js"></script>

接下来，就让KandyTabs发威吧。

你可以在这两行之后，或者是<body/>之内使用如下代码让KandyTabs发威：

<script type="text/javascript">
  $(function(){
    $("dl").KandyTabs();
  })
</script>

通常情况下，我们会使用 <dl/> 来制作标准的Tab选项卡原型，所以你的KandyTabs对象就是 dl 。这个也看不懂？那先学学 JQuery 吧……

更高级的应用请查看配置说明

代码结构

推荐使用dl元素（不是说必须得用dl元素）

<dl>
  <dt>Tab 1</dt>
  <dd>Tab 1 的内容。</dd>
  <dt>Tab 2</dt>
  <dd>Tab 2 的内容。</dd>
</dl>

或者你想考虑SEO

<div>
  <h1>Tab 1 关键词</h1>
  <div>Tab 1 的内容。</div>
  <h2>Tab 2 关键词</h2>
  <div>Tab 2 的内容。</div>
</div>

是的，不用担心，只要你能保持这样的结构，选项卡，折叠效果都可以使用。如果不具备这样的结构条件，那就用DOM创建。

注意：如果你要使用默认数字导航的幻灯片，你可以不必考虑dt/hn等标题元素，KandyTabs会自动创建数字标题。

构建一个幻灯片，你只需如下代码结构即可

<div>
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  <a href="#" title="也可以是一个包含有链接的图片"><img src="4.jpg" /></a>
</div>

配置说明

你可以在.KandyTabs({})的“{}”中使用以下配置来自定效果：（以下显示的是默认配置）

id      : "",          // Tab生成后的id，将覆盖之前的id，注意样式修改。
classes : "kandyTabs", // Tab的自定义class，默认为kandyTabs，幻灯片可以使用 kandySlide 来获得基本样式。
type    : "",          // Tab的衍生用法，支持“slide（幻灯片），fold（折叠）”。
trigger : "mouseover", // Tab触发的方式，普通的事件都可以接受，如单击，双击，进入，退出……
action  : "toggle",    // Tab切换的方式，只包括“toggle（直接显示/关闭），fade（渐隐渐现），slide（滑动），roll（滚动），
                          // slifade（fade后调整高度）”。
custom  : function(btn,cont,index,tab){},
                       // 自定义效果，即切换后自定义的动画效果，效果见Slide效果演示三；
                          // btn=选项卡按钮、cont=选项卡内容、index=当前索引、tab=当前选项卡；请按顺序匹配。
delay   : 200,         // 仅在mouseover事件中有用，即事件响应延时。
last    : 400,         // 动画（切换效果持续）时间，默认为400。
current : 1,           // 默认激活的第N个Tab，可通过URL配置，格式为“元素ID:数值”，支持多个，如：xxx.com/?mytab:2&myslide:5&myfold:10。
direct  : "top",       // roll的方向，默认为向上（即垂直方向），仅可选择 left 即向左（水平方向）。
except  : "",          // 不作为Tab的元素，如你本Tab在右上角看到的提示，请使用JQuery对象，支持N个，如 ".tip .more"。
child   : [],          // Tab中的子Tab和配置，请使用JQuery对象，如 ['#child .son',{}]，{}中直接写配置内容，不填则沿用父配置效果。
ready   : null,        // Tab运行前回调函数。
done    : function(btn,cont,tab){},
                       // Tab完成后回调函数；
                          // btn=选项卡按钮、cont=选项卡内容、tab=当前选项卡；请按顺序匹配。
auto    : false,       // 是否自动切换（播放）。
stall   : 5000,        // 切换停顿时间，默认为5000毫秒（即5秒）。
play    : true,        // 自动切换（播放）时默认是否切换（播放）。
process : false,       // 是否显示进度条，默认高度为5px，宽度自动。
ctrl    : false,       // 是否显示 暂停/自动 控制按钮。
nav     : false,       // 是否显示前一个/后一个导航，默认包含当前索引值和总数，可以通过css控制显示与否。
loop    : false,       // 导航操作是否循环，默认为否。
column  : 0,           // 默认为0，即不启用旋转木马效果，填写相应数值则自动执行旋转木马效果，请配合 type:"slide" 使用。
resize  : true,        // 切换动作完成后是否重新调整高宽，如果高宽确定请写false以提高效率。
lang    : {            // 目前显示的是默认语言和符号；请按照["提示文字","显示文字"]的格式填写，如需修改请全部修改一遍。
            first:["已是首个","<"],
           prev:["前一个","<"],
           next:["后一个",">"],
           last:["已是末个",">"],
           empty:"暂无内容",
           play:["播放",">>"],
           pause:["暂停",""]
          }

默认样式

如果不自定义class，则会使用以下默认样式。如果你需要自定义样式，可以不必导入该样式表。

文件 kandytabs.css
/*2011年7月15日更新，必要的css reset，根据实际情况使用*/
.tabtitle,.tabcont,
.tabbody dd,.tabbody ul,.tabbody ol,
.tabnav,.tabctrl,.tabprocess
{list-style:none;padding:0;margin:0}
/*以上样式表非3.0.0715版无需考虑*/
/*最常见（Tab选项卡效果演示第一个）效果的CSS样式表，可根据实际需要美化*/
.kandyTabs{
  margin:0;padding:2px;border:1px solid #DDD;background:#f5f5f5;overflow:hidden;zoom:1
}
.kandyTabs .tabtitle{
  margin:0;padding:0;line-height:22px;border-bottom:1px solid #DDD
}
.kandyTabs .tabtitle .tabbtn{
  margin:0 4px 0 0;padding:0 5px;display:inline-block;background:#e5e5e5;border:1px solid #DDD;border-width:1px 1px 0
}
.kandyTabs .tabtitle .tabcur{
  line-height:23px;background:#FFF;border-bottom:1px solid #FFF;font-weight:bold;color:#F00;margin-bottom:-2px
}
.kandyTabs .tabbody{
  padding:5px;background:#FFF;border:1px solid #DDD;border-width:0 1px 1px;overflow:hidden;zoom:1;margin:0
}
.kandyTabs .tabbody .tabcont{
  background:#FFF
}
.kandyTabs .tabbody .tabroll .tabcont{
  margin:5px 0 0
}
............
.........
......
...

里程碑

2012年2月（版本号：3.4.02xx）

PLAN；重整所有代码，进一步优化体积及效率。

2012年2月13日（无版本更新）

NOTICE；新增了StepTab/Guide步骤表单/向导效果演示。整理注明了CSS和JS的对应效果演示。

2012年1月10日（版本号：3.3.0110）

WARNING；因不明原因，目前发现本插件在遨游3浏览器中使用JQuery 1.6.2版会出现严重故障，请使用1.4以上或最新版本库。
NEW；新增了通过URL配置current的功能，仅针对有ID的选项卡，如abc.com/?mytab:2，即id为mytab的选项卡默认显示第2个内容。
NEW；完善了旋转木马的切换方式，实现了真正的前后切换效果。
NEW；新增了resize配置，减少了不必要的计算消耗。
BUG；修正了默认最后一个选项卡内容显示，且非loop模式时，$tabnext按钮仍可用的问题。
BUG；修正了当tabcont为dd或li时，其class和id丢失的问题。

2011年10月1日（版本号：3.1.1001）

BUG；修正了上一版修改遗漏造成列表类标签使用旋转木马时出现的HTML套嵌错误。
BUG；修正了上一版修改遗漏造成未配置自动播放时出现$prev不存在的错误。

2011年9月28日（版本号：3.1.0928）

WARNING；因疏忽，本版尚有BUG存在，如使用出现问题，请下载3.0.0715版使用。
CHANGE；重写了旋转木马的运行方式，解决了已知的问题。

2011年9月27日（版本号：3.1.0927 beta）

NEW；加入了id配置，方便生成选项卡前后的css样式编写。
BUG；修正了classes不能为空的问题。
BUG；修正了之前版本选项卡生成模式导致的tabbtn的id和class丢失的问题。
BUG；修正了旋转木马css未定义tabcont的宽度导致roll:"left"失效的问题。
CHANGE；重写了列表类标签选项卡tabcont生成模式，减少了对CSS的定义。（注意，升级到此版本无需考虑3.0.0715版的针对性样式问题。）
CHANGE；修改了对DOM元素是否已生成选项卡的判断的方式。
CHANGE；优化了部分代码，效率会有微不足道的提高。

2011年7月15日（版本号：3.0.0715）

NEW；重写了选项卡生成模式，减少了对DOM的操作。（注意，升级到此版本可能会出现样式问题，请根据实际情况调整样式表。）
BUG；修正了之前版本选项卡生成模式导致的图片再次加载的问题。
BUG；修正了之前版本选项卡生成模式导致的IE浏览器HTML5元素样式失效的问题。
CHANGE；优化了slifade效果，效果更流畅，消除了过渡时出现选项卡背景色的问题。

2011年6月27日（版本号：2.3.0627）

BUG；修正上一版修改遗漏造成普通选项卡的tabpage总数的出错的问题。
BUG；修正选项卡的class带空格（如 class="mytab "）的问题。

2011年6月21日（版本号：2.3.0621）

BUG；修正了当tabbtn为链接或图片时，tabbtn的链接失效及图片不显示的问题。
BUG；修正了选项卡总数不为整数的问题。
CHANGE；优化了部分代码，效率会有微不足道的提高。

2011年5月18日（版本号：2.2.0518）

BUG；修正上一版修改遗漏造成的child不可用的问题。

2011年5月10日（版本号：2.2.0510）

NEW；加入了自动播放内存回收机制。
CHANGE；优化了部分代码，效率会有微不足道的提高。
BUG；修正了当tabcont为链接或图片时，链接失效及图片不显示的问题。

2011年3月22日（版本号：2.1.0322）

NEW；增加了横向滑动折叠效果。（请配合action="slide",direct="left"使用。）
NEW；增加了last（动画效果时间）配置。
NEW；custom回调函数增加了当前索引和当前选项卡对象。
NEW；done回调函数增加了按钮、内容及当前选项卡对象。
CHANGE；完善了lang配置，提供["提示文字","显示文字"]的接口。

2011年3月18日（版本号：2.0.0318）

NEW；增加了lang（语言）、custom（自定义特效）配置。
CHANGE；去除、转义了pack版中的中文，以防gbk编码用户出错。

2011年2月18日（版本号：1.9.0218）

BUG；修正了tab元素空id（id=""）的问题。
BUG；修正了loop循环（旋转木马）的无用tabbtn未清除的问题。
BUG；loop循环（旋转木马）真正实现了循环效果。
CHANGE；修改了except元素的插入位置，如果为标题（Hn或class*='title'）将自动插入在tab元素第一位。

2011年2月17日（版本号：1.9.0217）

NEW；增加loop（循环）配置。
BUG；修正了默认第一个选项卡时前后导航中前一个导航可点击的问题。
BUG；修正了tabroll宽度计算错误的问题。
CHANGE；改变了非loop情况下的前后导航的不可用的判断方法。
CHANGE；重写了.kandyTabs默认样式为最常见tab样式。

2011年2月16日（版本号：1.9.0216）

NEW；增加了carousel旋转木马效果。（请配合slide幻灯片效果使用。）
NEW；增加了carousel旋转木马默认样式。
CHANGE；为滚动效果默认添加了内容宽度。

2011年2月14日（版本号：1.8.0214）

BUG；修复了tabpage未正常套嵌内容的问题。
CHANGE；为方便易记，将accordion（手风琴）改名为fold（折叠）。
CHANGE；将tabnav的前后控制元素命名由b改为em，方便css控制。
CHANGE；将前后符号分别由“⇐ ⇒”改为“< >”。

2011年2月13日（版本号：1.8.0213）

NEW；增加手风琴效果。
NEW；增加默认手风琴样式。

2011年2月12日（版本号：1.7.0212）

NEW；增加默认幻灯片样式。
NEW；增加自动切换进度条效果。

2011年2月11日（版本号：1.6.0211）

NEW；支持幻灯片效果。
NEW；增加了选项卡总数和当前数显示，如 3/6 。

2011年2月10日（版本号：1.5.0210）

NEW；支持自动切换（播放）。
NEW；支持暂停/开始切换（播放）。
NEW；支持前后按钮切换。
NEW；显示当前选项卡索引值。

2011年2月9日（版本号：1.4.0209）

NEW；完成了direct方向功能，仅支持left（即水平方向）。
NEW；新增了slifade切换效果。

2011年1月29日（版本号：1.2.0129）

BUG；修复了多个except只生成一个的BUG。

2011年1月27日（版本号：1.2.0127）

插件正式发布。

下载

特别声明： 没有什么东西是拿来就能用的，如果你只是希望复制粘贴的用上KandyTabs，请绕道百度谷歌搜索其他能让你直接复制粘贴使用的JS特效或JQuery插件吧，谢谢合作！

不好意思，完整的DEMO演示还没有做好，如果你急着用，就请先下载最新 kandytabs.pack.js 和 kandytabs.css 吧！别忘了 jquery.js ！

注意： 如果您要下载本演示页面请使用IE浏览器。

意见反馈或BUG提交

请前往本插件博客发布页面提交反馈或BUG。http://www.jgpy.cn/blog/front-end/KandyTabs.htm

以下为已知BUG及（解决办法）：

插件在IE浏览器中没反应。（在KandyTabs({xx:xx,xx:xx})配置中，确保最后一个配置后不要有逗号）
与其他插件冲突或其他插件无法使用。（请尝试使用 done:function(){导入其他插件} 回调函数来避免此类问题）
~~插件在gbk网页中失效。（请使用编辑器转换文件编码，默认是utf-8；下版会考虑转义中文字符）~~
网速较慢，网页会乱掉。（可以考虑先隐藏Tab，在执行完后用 done 回调函数来显示Tab（感谢网友yc分享）；或者给使用插件前的HTML加上必要的美化样式，同时可以防止用户浏览器禁用JS脚本时网页乌七八糟）
~~修改语言，必须把lang{}全部配置一遍，正在找解决方案。（先不要通过lang来配置语言）~~
修改语言的prev,next会出错。（需要同时配置first,last项）
选项卡内容中自定义点击事件被多次执行。（请先unbind点击再bind点击。）

精彩案例

想增加外链么？那就快点使用并告诉我吧！或者观摩一下实际应用效果：

taono.cn 应用类型：分页、幻灯片、折叠。
515122.tk 应用类型：选项卡、幻灯片、折叠。
cshiz.com 应用类型：选项卡、幻灯片。
byx.773pp.com 应用类型：幻灯片。
sy.773pp.com 应用类型：幻灯片、选项卡、步骤表单。

最后修改：2012年2月13日14:00:28

Tab选项卡效果演示

Intro

这是一个最最最最最最最普通的Tab选项卡，鼠标放上去就可以切换了。

Xhtml

<dl id="simple">
  <dt>简介</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>参数</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#simple").KandyTabs();

Intro

这是一个渐隐渐现效果的Tab选项卡，鼠标放上去要等1秒钟才会切换。

Xhtml

<dl id="fade">
  <dt>简介</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>参数</dt>
    <dd>......</dd>
</dl>

CSS

#fade .tabtitle{
  text-align:center;
}

JS

$("#fade").KandyTabs(
  {
    action:"fade",
    delay:1000
  }
);

Intro

这是一个渐隐渐现后调整高度效果的Tab选项卡，鼠标放上去要等半秒钟才会切换。

Xhtml

<dl id="fade">
  <dt>简介</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>参数</dt>
    <dd>......</dd>
</dl>

CSS

#fade .tabtitle{
  text-align:center;
}

JS

$("#slifade").KandyTabs(
  {
    action:"slifade",
    delay:500
  }
);

Intro

这是一个滑动切换效果的Tab选项卡，需要单击切换。

Xhtml

<dl id="slide">
  <dt>简介</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>参数</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#slide").KandyTabs(
  {
    action:"slide",
    trigger:"click"
  }
);

Intro

这是一个垂直滚动效果的Tab选项卡，鼠标按下后就会马上切换。

Xhtml

<dl id="roll">
  <dt>简介</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>参数</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#roll").KandyTabs(
{
    action:"roll",
    trigger:"mousedown"
  }
);

Intro

这是一个水平滚动效果的Tab选项卡，鼠标按下释放后就会马上切换。

Xhtml

<dl id="rollleft">
  <dt>简介</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>参数</dt>
    <dd>......</dd>
</dl>

CSS

#rollleft .tabtitle{
  float:left;
  margin:0 2px -2px 0;
  _margin-right:-1px;
  border:none;
}
#rollleft .tabtitle .tabbtn{
  display:block;
  width:50px;
  margin:0 0 2px;
  background:none;
  border:1px solid #DDD;
  cursor:pointer
}
#rollleft .tabtitle .tabcur{
  border:1px solid #ddd;
  background:#DDD;
  margin:0 -2px 2px 0;
  width:52px;
  cursor:default;
  _position:relative
}
#rollleft .tabbody{
  border-width:1px 1px 1px 2px;
  float:right
}
#rollleft .tabcont{
  margin:0 5px;
  width:237px
}

JS

$("#rollleft").KandyTabs(
{
    action:"roll",
    trigger:"mouseup",
    direct:"left"
  }
);

fold折叠效果演示

Intro

这是一个最最最最最普通的fold折叠，鼠标放在标题上后就会马上切换。

Xhtml

<dl id="fold-simple">
  <dt>Intro</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>JS</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#fold-simple").KandyTabs(
{
    classes:"kandyFold",
	type:"fold"
  }
);

Intro

这是一个切换效果的fold折叠，鼠标放在标题上后就会马上切换。

Xhtml

<dl id="fold-slide">
  <dt>Intro</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>JS</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#fold-slide").KandyTabs(
{
    classes:"kandyFold",
	action:"slide",
	type:"fold"
  }
);

Intro

这是一个渐隐渐现效果的fold折叠，鼠标点击标题后就会马上切换，并用CSS隐藏当前标题。

Xhtml

<dl id="fold-fade">
  <dt>Intro</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>JS</dt>
    <dd>......</dd>
</dl>

CSS

#fold-fade .tabbtn{
  cursor:pointer
}
#fold-fade .tabcur{
  display:none
}

JS

$("#fold-fade").KandyTabs(
{
    classes:"kandyFold",
    action:"fade",
    type:"fold",
    trigger:"click"
  }
);

Intro

这是一个横向滑动效果的fold折叠，鼠标点击标题后就会马上切换。

Xhtml

<dl id="fold-left">
  <dt>Intro</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>JS</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#fold-left").KandyTabs({
    classes:"kandyFold",
    type:"fold",
    action:"fade",
    trigger:"click",
    last:800
})

Intro

这是一个标题在右侧的横向滑动效果的fold折叠，鼠标经过标题后就会马上切换。

Xhtml

<dl id="fold-right">
  <dt>Intro</dt>
    <dd>......</dd>
  <dt>Xhtml</dt>
    <dd>......</dd>
  <dt>CSS</dt>
    <dd>......</dd>
  <dt>JS</dt>
    <dd>......</dd>
</dl>

CSS

整理中...

JS

$("#fold-right").KandyTabs({
    classes:"kandyFold",
    type:"fold",
    direct:"left",
    action:"slide",
    done:function(b,c,t){
        b.each(function(i){
            $(this).insertAfter(c[i])			
        })
        c.wrapInner("<div style='padding:10px'/>")
    }
})