«
»

TAB选项卡示例介绍

演示主页：http://www.imf7.com/code/tab/
博客介绍：http://www.imf7.com/archives/154

选项卡解说：
1、支持一个页面多次引用；
2、一次引用实现多次切换；
3、点击/滑过等切换方式自定义；
4、自动播放+鼠标动作切换；
5、自动播放时鼠标移向内容区域暂停播放；
6、切换完成后回调函数。

函数引用说明：
slide({handle:elems, content:elems, current:”current”, mode:”click”, delay:5000, fn:function(){…} });

引用基本格式 slide({…}); 中间的“…”所代表的就是参数内容。

参数说明：
handle：表示选项卡分组名称的节点数组
content：表示与分组名称对应的内容的节点数组
current：表示当前分组名称的样式名称
mode：表示切换方式，支持“click/mouseover/…”等鼠标事件
delay：表示自动播放的间隔时间，有值则自动播放，单位毫秒
fn：表示切换完成一次后的回调函数

完整版下载TAB.rar
完整JS下载tab.full.rar
压缩JS下载tab.min.rar

演示主页：http://www.imf7.com/code/tab/
博客介绍：http://www.imf7.com/archives/154

This entry was posted on 星期一, 七月 19th, 2010 at 11:35 上午 and is filed under 我的作品, 经典代码. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

9 Responses to “TAB选项卡示例介绍”

  1. Vuitton说道：
    2010年07月27日1:55 下午

    很好的文章！

  2. santalex说道：
    2010年08月31日11:05 上午

    如果都是div标签的话,貌似会失效,今天碰到有人问,最终还是没有全部div

  3. 自由天堂说道：
    2010年09月1日9:57 上午

    不管DIV是什么，执行函数slide中的handle和content两个参数所接受的都是节点数组，只要你将节点传递正确就不会有问题，即使你的标签部分有多个标签组成『例如 标签一标签二』都可以，只要你将em和span组合成一个节点数组，然后传递给slide函数就可以。

  4. 王龙说道：
    2010年10月26日10:32 上午

    在ie6下编码的问题

    编码很重要的建议用 utf-8
    你的js和页面编码的都是。。ANIS

    在ie6中如果不写 ！
    这句话就会报错！

    建议改改dw的参数编码——utf-8

  5. 自由天堂说道：
    2010年10月27日9:37 上午

    谢谢您的使用！文件编码根据个人喜好调整，您习惯用utf-8，随便打开一个编译器都可以更改文件本身的编码，只要和您使用的网页编码一致就不会有问题。

  6. shwan说道：
    2010年12月6日6:03 下午

    非常好的JS！短小精悍，功能强大。
    *不仅适用于TAB，也可以做MENU！*
    不过有一点点可以改进：应该增加鼠标离开ul区域后，隐藏当前ul的mode，这样它就更完美啦！！！

  7. shwan说道：
    2010年12月6日6:05 下午

    小弟不才，研究了半天，没能加上这个功能。

  8. 自由天堂说道：
    2010年12月8日1:57 下午

    这两天比较忙，过几天闲了考虑下怎么处理通用性更强。

  9. 百事通说道：
    2012年04月13日12:11 上午

    如何加个左右控制上一个下一个的按钮 很喜欢你的代码 感谢下先