KandyTabs JQuery Tab 选项卡插件正式发布

Thursday, January 27, 2011 吉光片羽 42

怀着无比激动的心情，我淡定的发布这款由吉光片羽开发的 JQuery Tab 选项卡插件 —— KandyTabs 。KandyTabs选项卡以HTML标准及用户体验为指导思想，顺便美其名曰有利于SEO，在保留了网页应有的格式与外观的情况下，有效的将内容选项卡化。选项卡的目的只是为了能让网页布局更紧凑，在失去它的作用时，也决不能让用户甚至蜘蛛摸不着头脑。而这正是时下选项卡风犯下的最不人性的低级错误，就如同网页一开始用Table来布局一样。

如果你知道dl列表，如果你喜欢上了用dl列表，如果你正需要选项卡效果，那么，请毫不犹豫的试用KandyTabs吧。这正是一款基于dl列表结构的JQuery选项卡插件。当然，如果你习惯一个dt后跟着多个dd，那可能就得考虑一下了。也就是说，即使你不用dl结构，而采用dl结构的代码布局，KandyTabs是同样奏效的，不信请看：

HTML :\ Ctrl+A 全部选择提示：你可先修改部分代码，再按运行运行此代码: <h1>H1标题</h1> <div>内容</div> <h2>H2标题</h2> <div>内容</div> <h3>H3标题</h3> <div>内容</div> <h4>H4标题</h4> <div>内容</div>

请注意，如果采用时下选项卡的常用结构，再仔细看看，他是多么的不易阅读理解：

HTML :\ Ctrl+A 全部选择提示：你可先修改部分代码，再按运行运行此代码: <div> <h1>H1标题</h1> <h2>H2标题</h2> <h3>H3标题</h3> <h4>H4标题</h4> </div> <div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> </div>

如果选项卡效果失效了，鬼知道那个内容对应那个标题？蜘蛛看了也会抓狂吧，那么多标题挤一块，你是想干嘛！？

不喜欢这样的方式？当然，如果你能100%保证你的网页在客户端脚本不会失效，而蜘蛛也懂得按照选项卡格式来爬你的内容，你还可以再看看老外开发的6个出色的基于JQuery的Tab选项卡实例，或者，用最简单的方法来实现，如果你熟悉JQuery的话：基于JQuery1.4 Tab选项卡一行代码轻松搞定，但很不幸的告诉你，这个也是我犯下低级错误的恶果。

不就一个新的代码结构思维嘛，除了这个看似牵强的特色，KandyTabs还有什么值得利用的地方呢？当然，KandyTabs出乎意料又意料之中的包含了几种切换方式及特效，看到这，心动了不？不心动也没关系，看看也不会浪费你多少时间，而更多好玩的地方，就等着你自己去发现吧：

KandyTabs JQuery Tab 选项卡插件演示

引自 KandyTabs更新记录: 2011年6月27日（版本号：2.3.0627）
2011年6月21日（版本号：2.3.0621）
2011年5月18日（版本号：2.2.0518）
2011年5月10日（版本号：2.2.0510）
2011年3月22日（版本号：2.1.0322）
2011年3月18日（版本号：2.0.0318）
2011年2月18日（版本号：1.9.0218）
2011年2月17日（版本号：1.9.0217）
2011年2月16日（版本号：1.9.0216）
2011年2月14日（版本号：1.8.0214）
2011年2月13日（版本号：1.8.0213）
2011年2月12日（版本号：1.7.0212）
2011年2月11日（版本号：1.6.0211）
2011年2月10日（版本号：1.5.0210）
2011年2月09日（版本号：1.4.0209）
2011年1月29日（版本号：1.2.0129）
2011年1月27日（版本号：1.2.0127）

如果有疑问、意见、建议或抓到BUG，请在下方评论提出，特别感谢！

© 版权声明：

本文为吉光片羽原创，遵循知识共享许可协议，转载（全文或部分文字）请务必注明作者：吉光片羽，及本文地址。谢谢合作！
文中所引用的部分图片或文字等资源版权归原作者所有，如果侵犯了您的权益，请在下方评论提出，我会尽快处理。

已有人对此文发表了评论

采云追 4/6/2012 2:40:36 AM 回复
现在有个致命BUG，tab里面定义的js函数都会被执行2次
moxuanyuan 于 4/12/2012 12:42:14 AM 回复
因为按模块化开发，可重用，tab里面的内容各是一个模块，由后台php动态加载，模块里除了html还有js代码，发现使用tab插件后（不光是KandyTabs，其它的也是这样），js代码执行了两次，是一个很严重的问题，不知有谁有方法解决呢？
alansuhe 3/20/2012 8:34:40 PM 回复
浏览器刷新的时候（不管哪种浏览器），tab内容会混乱，最后一个tab的内容会被复制到第一个tab中去，而第一个tab的内容消失，标题正常。
1111 2/15/2012 12:16:01 AM 回复
current要怎麼使用有完整的範例?
guogh 2/9/2012 8:35:34 AM 回复
$("#m_bd_tabs").KandyTabs();
$("#cpyy_tabs").KandyTabs({
type: "slide",
column: 3,
classes: "kandyLoop",
action: "roll",
direct: "left",
trigger: "click",
except: "h4",
auto: true,
nav: true,
loop: true,
resize: false
});
$("#Div1").KandyTabs({
type: "slide",
column: 4,
classes: "kandyLoop",
action: "roll",
trigger: "click",
except: "h4",
auto: true,
nav: true,
loop: true,
resize: false
});
m_bd_tabs 的两个tabs中分别嵌套cpyy_tabs和Div1,cpyy_tabs一切正常，Div1生成了下面的代码div class="tabbody" style="position: relative; overflow: hidden; height: 0px; width: 0px;"
宽度高度都为0，造成内容看不到
asdf 1/17/2012 9:39:06 AM 回复
引自 owen
再接上面的回复，代码写成了一行报错找不到地方。就报12行的错。吉光[EMAIL=@][/EMAIL]片羽于 3/22/2011 12:54:56 AM 回复估计是你的配置里最后跟有","，去掉试试。
[EMAIL=@][/EMAIL][EMAIL=@][/EMAIL][EMAIL=@][/EMAIL][EMAIL=@][/EMAIL][EMAIL=@][/EMAIL][EMAIL=@][/EMAIL][EMAIL=@][/EMAIL][EMAIL=@][/EMAIL]
czhipu 12/30/2011 1:18:42 AM 回复
$("dl").KandyTabs({
action: "toggle",
trigger: "mouseup",
direct: "top",
custom: function (btn, cont, index, tab) {$("#btnDelEnroll").click(function () {
alert(''sss'');
});}
km 于 1/10/2012 8:03:05 AM 回复
是的，有可能会出现这种情况。可以考虑使用 off().on('click',fn()）来重新绑定一次
czhipu 12/30/2011 1:15:50 AM 回复
$("dl").KandyTabs({
action: "toggle",
trigger: "mouseup",
direct: "top",
custom: function (btn, cont, index, tab) {
$("#btnDelEnroll").click(function () {
if (stuId == "") {alert('sss')}});
}
Tab里面的按钮btnDelEnroll每次点击均会执行4次，
$("#btnDelEnroll").click(function () {
if (stuId == "") {alert('sss')}});
放在$("dl").KandyTabs({})外面，点击事件不起作用！
吉光片羽于 1/9/2012 1:56:48 PM 回复
很抱歉，应该是代码逻辑的问题，我尽快解决。暂时可以考虑使用一下两种方法来解决：
1，$("#btnDelEnroll").click()放在$("dl").KandyTabs()之后，试试。
2，在custom回调函数中先$("#btnDelEnroll").unbind("click")，再$("#btnDelEnroll").bind("click")，可以有效解决这个问题。
bluer1 12/14/2011 7:33:39 PM 回复
控件很强大，不过请问一个问题，比如我在tab外面有按钮，想点击这个按钮跳到指定的选项卡，请问如何实现呢。谢谢。
吉光片羽于 1/9/2012 1:53:25 PM 回复
暂时只能使用$("#mytab .tabbtn:eq(n)").trigger("click")的方式来实现。
fusu 11/28/2011 3:00:22 AM 回复
刚说的chrome版本是14.0.825.0，而且我很悲剧的发现在IE9中那个宽度也不正确。。。。
fusu 11/28/2011 2:53:50 AM 回复
好像在chorm中，" <dt>bug</dt> <dd></dd>"语句中dd的宽度默认获取的是整个浏览器的宽度，而且不会自动换行，只是使用了溢出隐藏的策略。。。
kissthink 11/15/2011 7:48:16 AM 回复
是否可以考虑添加ajax载入tab的功能呢？
吉光片羽于 11/19/2011 9:01:04 AM 回复
这个是必须的，会考虑iframe方式或ajax方式，不过更多的功能就表示更大的体积，这是一个考验啊。
唇角轻扬 10/9/2011 8:09:40 PM 回复
添加关闭某个选项卡的功能吧~~
吉光片羽于 11/19/2011 8:59:09 AM 回复
嗯，这个功能会在后期版本中加入，请耐心等待。
GabrielLin 10/8/2011 7:00:03 PM 回复
配置为自动播放时，希望加入鼠标鼠标移上暂停播放的功能
吉光片羽于 11/19/2011 8:57:50 AM 回复
这个功能有的，不过貌似有个BUG，就是非得自动播放完一遍以后才有效，有时间会处理这个问题。
onlylove 9/28/2011 8:22:14 AM 回复

<dl>
<dt>1层</dt>
<dd>
<dl>
<dt>2层</dt>
<dd>2层内容</dd>
</dd>
</dl>

我这样嵌套，第2层的dd，只显示出dt，请问是怎不是不能这样嵌套，请指教。
小胖纸 8/31/2011 8:07:58 PM 回复
如果用户网速差，JS加载超慢，那选项卡都面目全非了。

我也一直在考虑这种结构的选项卡，但是完全依靠js来处理，硬伤
吉光片羽于 9/1/2011 8:24:58 PM 回复
嗯，确实存在这样的问题，但控制好CSS是没问题的，如果将选项卡写死，JS无法加载或禁用的话，选项卡中大部分内容都将不可见，就违背了网页展示内容的初衷了。考虑这样的结构完全是基于页面本身的可读性，即没有样式和特效，同样能够清晰展示内容。
Test 8/22/2011 12:02:32 PM 回复
你写的这个东西太诡异了，尤其是http://demo.jgpy.cn/kandyTabs/上那些效果展示例子，真他娘的坑爹啊，如果之前的代码结构已经废弃了，至少说一声吧
吉光片羽于 8/24/2011 6:46:24 PM 回复
呃，不知道你具体指的是哪一块，之前的代码结构没有改变的，只是生成TAB的结构有所调整，需要重新设定CSS来调节外观而已。给你造成不便，还请见谅。。。
咸梅干超人 8/2/2011 11:04:32 PM 回复
向作者请教一个问题，如何在tab对象中取得当前选中的dom对象？急。
谢谢作者的开发，做的不错
吉光片羽于 8/24/2011 7:09:44 PM 回复
custom:function(b,c,i,t){
b.click(function(){
alert(c.eq(i).html())
})
}
试试看，应该对的。
rokin 7/26/2011 12:22:55 AM 回复
上个评论没有通过么？
请问，有没有禁用选项卡的功能？
rokin 于 7/26/2011 1:55:13 AM 回复
找到方法了。。
$(".tabbtn").attr('disabled',true);
rokin 7/26/2011 12:02:28 AM 回复
请问，有没有禁用某个选项卡的功能？
吉光片羽于 8/24/2011 6:44:22 PM 回复
这个可以有，但暂时没有。不过你可以通过custom回调函数来实现。
吉光片羽 7/8/2011 9:01:45 AM 回复
嗯，这确实是个问题，主要是插件可匹配的HTML元素太多造成的。最近也一直在考虑如何优化这个问题，当然，问题是可以解决的，但插件的体积可能就会很臃肿了。谢谢你提出的建议和支持，我会尽快完善新版本。
gumutianqi 7/7/2011 5:08:27 AM 回复
哥哥，这个插件效果很好。唯一也是致命的缺陷就是页面加载完成了Tabs才显示正常，IE8都不行，这就是杯具啦啊。
看了只有放弃了，我还是用小巧的idTabs吧，外国佬的东西，连他妈IE5都没问题
lijigang1982 6/22/2011 11:11:10 PM 回复
nav:ture时,默认包含当前索引值和总数.http://demo.jgpy.cn/demo/kandyTabs/,系统进入后看到"<6/5>",此处总数显示有问题,当前共有9个TAB项,但总数为5!
吉光片羽于 8/24/2011 6:42:55 PM 回复
呃，这个问题应该已经解决了。
威言威语 6/13/2011 8:09:29 AM 回复
效果很多啊，哈哈~
吉光片羽于 7/8/2011 9:03:09 AM 回复
那是那是，哇哈哈哈，问题也不少，呵呵。
玎蕾 6/12/2011 6:39:57 PM 回复
博主：我用了插件，当到最后一张图片的时候，会有js错误
$tabnext.html()==null?g.first().trigger(v.trigger):$tabnext.trigger(v.trigger)
玎蕾于 6/12/2011 6:40:21 PM 回复
对象不支持此属性或方法
liaodan 5/19/2011 6:49:22 PM 回复
很好很强大，楼主辛苦了，提个建议，就是选项卡N多的时候，看是不是可以左右滑动选项卡标题，或者有个下拉箭头选中更多。
吉光片羽于 7/8/2011 9:05:08 AM 回复
很好的建议，会在后期考虑，谢谢支持！
aceldama 5/16/2011 6:46:07 PM 回复
很棒，已经在使用了。
提个建议：
1、在对图片幻灯片使用fade效果时，图片切换时会发白和闪烁，据观察是前一张图片是直接切出后，后一张才隐入，之间的短暂间隔会透出白色背景，虽然可以通过调整背景深度缓解闪烁，但是整个衔接还是略显生硬。建议在前一张隐出的同时后一张就隐入，使前后衔接更流畅。
下面这个jquery插件的fade效果就比较好：http://www.malsup.com/jquery/cycle/
2、能不能实现当鼠标移出整个tab区域后，自动恢复显示第一个tab或者指定tab的内容。

感谢博主为我们提供这么优秀的插件！
吉光片羽于 7/8/2011 9:12:11 AM 回复
感谢你的建议，如果fade效果不佳，可以考虑使用slifade，这点细节问题，我会想办法尽量优化的，谢谢支持！
NetMan 5/12/2011 8:08:40 PM 回复
这个好用，谢谢了。
吉光片羽于 7/8/2011 9:08:35 AM 回复
不客气，谢谢支持！
mircool 4/26/2011 1:31:09 AM 回复
好像只能IE使用，其他浏览器出不来效果！
吉光片羽于 7/8/2011 9:10:07 AM 回复
应该是兼容主浏览器的，别的浏览器有什么报错信息最好能提供一下，谢谢！
joyopod 3/29/2011 8:46:11 AM 回复
好东西，持续关注中。
加油。
吉光片羽于 3/30/2011 5:47:38 PM 回复
谢谢关注与支持！
amile 3/24/2011 7:51:41 PM 回复
不知道为什么，只有谷歌浏览器正常，各种IE版本都不正常，内容就是平铺，难道用的时候有什么特别之处么？
吉光片羽于 3/27/2011 7:51:12 AM 回复
有具体的演示地址吗？这不是一个全能的插件，很多东西需要自己去辅助实现，包括CSS和JS。还请耐心解读演示，或者说明白具体应用出错的情况，谢谢。
ccc 3/23/2011 2:56:29 AM 回复
内容里包含fckediter2.6.6 会报个js错：未指明的错误 ,不知道什么原因，有什么解决办法没
吉光片羽于 3/24/2011 7:26:47 PM 回复
我抽时间测试下。
pengkey 3/21/2011 7:55:56 PM 回复
custom属性中,自定义tab签变换事件,怎么可以拿到当前选项签中的索引或选项签里的文字?
吉光片羽于 3/22/2011 12:59:18 AM 回复
已经增加了索引属性，请到演示页面查看配置说明并下载最新代码。
鹏 3/14/2011 6:19:46 PM 回复
弱弱的问一句如果是想用ajax掉用内容，怎么办嘞，back太简化了，看不到源码
吉光片羽于 3/22/2011 12:58:19 AM 回复
在选项卡生成以后自己写调用代码，熟悉JQ的话应该不难的。
鹏于 3/22/2011 4:22:08 AM 回复
发现个小问题，例如直接绑定$("#div dt").click(function(){//里边的内容会执行2次 }); 不知道实际有没有这个问题，还有个事，在$("#kt").KandyTabs(); 执行过后发现，表单里边的input:password 的value 值不见了。我用的IE8 其他浏览器暂时没看
鹏于 3/22/2011 4:29:29 AM 回复
呃，刚看了更新有了 done 回调函数，第一个问题就解决了。
鹏 3/14/2011 6:18:05 PM 回复
引自 DREAM
$(function () {$("#roll").KandyTabs({ action: "roll", trigger: "mouseup", direct: "left" })})竖向的tab怎么不行？

那个要加上#rollleft的样式的
djjiaju 3/4/2011 9:18:19 PM 回复
你的插件很酷但是如果不能和其他的一起用
可就没法用了很可惜
吉光片羽于 7/8/2011 9:10:38 AM 回复
插件是可以跟别的插件兼容的，执行顺序调整一下就好了。
djjiaju 3/4/2011 9:17:07 PM 回复
我的邮箱 djjiaju@163.com 请答复
吉光片羽于 3/22/2011 12:57:04 AM 回复
在选项卡生成以后再使用第三方插件，一般是没问题的。
djjiaju 3/4/2011 9:16:46 PM 回复
效果很棒不过会导致其他一些js效果出现问题
目前我已经发现导致highslide不正常导致mytalbe不正常
而且highslide 还不是JQuery一族的也出现问题可就太奇怪了
吉光片羽于 7/8/2011 9:07:12 AM 回复
将highslide和mytable放在kandytabs执行代码后一般是不会有问题的。
romejiang 2/23/2011 3:44:33 PM 回复
不知道能不能支持live，也就是在到用过$("xx").KandyTabs()方法后还能通过append等方式向里面添加tab。
还有不知道能不能提供源码，这样有些问题可以自己看源码解决了。
吉光片羽于 3/22/2011 12:56:25 AM 回复
目前只能在append后，增对append的元素再KandyTabs()一次。
owen 2/17/2011 2:18:40 PM 回复
再接上面的回复，代码写成了一行报错找不到地方。就报12行的错。
吉光片羽于 3/22/2011 12:54:56 AM 回复
估计是你的配置里最后跟有","，去掉试试。
owen 2/17/2011 1:57:49 PM 回复
控件很给力，谢了。建议能否将kandytabs.pack.js文件的代码不要一行写到底。
吉光片羽于 3/22/2011 12:54:20 AM 回复
完善以后会开源的。
DREAM 2/16/2011 5:54:23 PM 回复
$(function () {
$("#roll").KandyTabs({ action: "roll",
trigger: "mouseup",
direct: "left" })
})

竖向的tab怎么不行？
吉光片羽于 7/8/2011 9:06:08 AM 回复
这里定义了direct方向为left左，即水平方向，去掉这个就可以了。
solin 1/29/2011 3:33:42 PM 回复
真的很棒，收藏了！
吉光片羽于 2011-2-1 12:28:12 回复
谢谢肯定~