tab切换

当前版本:V1 最近更新:2012-07-31 组件作者:nickyxie

 

组件说明

组件切换时候,只会对操作当前的dom节点,也不会进行多余的for循环,调用方便,可重复调用,支持延迟切换,支持回调函数,支持扩展(添加动画效果)等。

更新日志

  • 2012/7/31 新增milo tab版。
  • 2012/7/31 修复了一个BUG,该BUG曾导致 当鼠标移动LI上给当前Li定义class时会覆盖掉之前已在HTML定义的class。
  • 2012/7/31 针对有切换动画效果版本的tab,做了一些优化和新增了自动切换功能。

非milo版本组件使用

1、html结构

综合综合综合综合综合综合综合综合综合综合综合综合综合综合综合综合

公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告

活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动

2、样式代码

.tab .hd .on{...}

设置当前标签(li)样式。组件初始化会给第一个标签(li)设置class=”on”;

.tab .tab-panel{display: none }
.tab .dis{display: block }

控制tab-panel显示隐藏,默认隐藏。组件初始化会给第一个tab-panel设置class=”dis”;

3、JS调用

简单调用:

.tab .tab-panel{display: none }
.tab .dis{display: block }

可选参数调用:

var tabs01 = new tabs("tab", "tab-panel", {
    timeout: 80,//延迟切换时间。默认参数为60;
    currCls: "on",//设置当前标签(li)class 名。默认参数为"on";
    disCls: "dis",//控制显示class名。默认参数为"dis";
    event: "mouseover",//事件类型。默认为"mouseover";
    onFinish: callback, //回调函数。需要定义callback函数;
    animation: "slide",//需要动画效果设置此参数.可选slide/fade (滚动/渐入)
    auto: true,//是否自动切换。默认为false
    Pause: 300 //每次自动停顿时间(auto为true时有效)
});

DEMO演示

简易版本demo;

有切换效果版本(滑动、渐变)demo;

milo版本

JS调用方法

需要引入milo

http://ossweb-img.qq.com/images/js/milo/milo-min.js

JS调用方法:

need("biz.tabs",function (tabs){

	//简单调用
	tabs.init("tab", "tab-panel");

	//滑动切换
	tabs.init("slideTab", "tab-panel",{
		timeout: 80,//延迟切换时间。默认参数为60;
		currCls: "on",//设置当前标签(li)class 名。默认参数为"on";
		disCls: "dis",//控制显示class名。默认参数为"dis";
		event: "mouseover",//事件类型。默认为"mouseover";
		onFinish: callback, //回调函数。需要定义callback函数;
		animation: "slide",//有动画效果设置此参数。参数可选slide/fade (滚动/渐入)
             change: 350,//当有动画slide效果,设置此参数(每次移动的PX值)。
		auto: true,//是否自动切换。默认为false
		Pause: 300 //每次自动停顿时间(auto为true时有效)
	});

	//渐变切换
	tabs.init("fadeTab", "tab-panel",{
		timeout: 80,//延迟切换时间。默认参数为60;
		currCls: "on",//设置当前标签(li)class 名。默认参数为"on";
		disCls: "dis",//控制显示class名。默认参数为"dis";
		event: "mouseover",//事件类型。默认为"mouseover";
		animation: "fade",//有动画效果设置此参数。参数可选slide/fade (滚动/渐入)
		auto: true,//是否自动切换。默认为false
		Pause: 300 //每次自动停顿时间(auto为true时有效)
	})

})

DEMO演示

内含3个版本:简易版本、滑动切换、渐变切换 demo