一个js封装的不错的选项卡效果代码

复制代码 代码如下:






/*
选项卡封装
by井底的蛙
2008-2-4
*/
opCard=function()
{
this.bind=newArray();
this.index=0;//默认显示哪个选项卡，从0开始

this.style=newArray();//["","",""]
this.overStyle=false;//选项是否有over,out变换样式事件，样式为this.style[2]
this.overChange=false;//内容是否用over,out直接激活
this.menu=false;//菜单类型
this.nesting=[false,false,"",""];//是否嵌套，后面2个参数是指定menu,info的子集深度所用id

this.auto=[false,1000];//自动滚动[true,2000]
this.timerID=null;//自动播放的
this.menutimerID=null;//菜单延时的

this.creat=function(func)
{
var_arrMenu=document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
var_arrInfo=document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
varmy=this,i;
varargLen=arguments.length;
vararrM=newArray();

if(this.nesting[0]||this.nesting[1])//有选项卡嵌套
{//过滤出需要的数据
vararrMenu=this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
vararrInfo=this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
}
else
{
vararrMenu=_arrMenu;
vararrInfo=_arrInfo;
}

varl=arrMenu.length;
if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量n如果需要，你可以放一个空的在那占位。")}

//修正
if(this.menu){this.auto=false;this.overChange=true;}//如果是菜单，则没有自动运行，有over,out直接激活

//循环添加各个事件等
for(i=0;i{
arrMenu[i].cName=arrMenu[i].className;
arrMenu[i].className=(i!=this.index||this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);//加载样式，菜单的话统一样式

if(arrMenu[i].getAttribute("skip"))//需要跳过的容器
{
if(this.overStyle||this.overChange)//有over,out改变样式或者激活
{
arrMenu[i].onmouseover=function(){changeTitle(this,2);autoStop(this,0);}
arrMenu[i].onmouseout=function(){changeTitle(this,0);autoStop(this,1);}
}
arrMenu[i].onclick=function(){if(argLen==1){func()}}
arrInfo[i].style.display="none";
continue;
}

if(i!=this.index||this.menu){arrInfo[i].style.display="none"};//隐藏初始化，菜单的话全部隐藏
arrMenu[i].index=i;//记录自己激活值[序号]
arrInfo[i].index=i;

if(this.overChange)//有鼠标over,out事件
{
arrMenu[i].onmouseover=function(){changeOption(this);my.menu?changeMenu(1):autoStop(this,0);}
arrMenu[i].onmouseout=function(){changeOption(this);my.menu?changeMenu(0):autoStop(this,1);}
}
else//onclick触发
{
arrMenu[i].onclick=function(){changeOption(this);autoStop(this,0);if(argLen==1){func()}}
if(this.overStyle)//有over,out改变样式
{
arrMenu[i].onmouseover=function(){changeTitle(this,2);autoStop(this,0);}
arrMenu[i].onmouseout=function(){changeTitle(this,0);autoStop(this,1);}
}
else//没有over,out改变样式
{
if(this.auto[0])//有自动运行
{
arrMenu[i].onmouseover=function(){autoStop(this,0);}
arrMenu[i].onmouseout=function(){autoStop(this,1);}
}
}
}

if(this.auto[0]||this.menu)//arrinfo控制自动播放
{
arrInfo[i].onmouseover=function(){my.menu?changeMenu(1):autoStop(this,0);}
arrInfo[i].onmouseout=function(){my.menu?changeMenu(0):autoStop(this,1);}
}
}//for结束

if(this.auto[0])
{
this.timerID=setTimeout(autoMove,this.auto[1])
}

//自动播放
functionautoMove()
{
varn;
n=my.index+1;
if(n==l){n=0};
while(arrMenu[n].getAttribute("skip"))//需要跳过的容器
{
n+=1;
if(n==l){n=0};
}
changeOption(arrMenu[n]);
my.timerID=setTimeout(autoMove,my.auto[1]);
}

//onmouseover时，自动播放停止。num：0为over，1为out。obj暂时无用。-_-!!
functionautoStop(obj,num)
{
if(!my.auto[0]){return;}
//if(obj.index==my.index)
num==0?clearTimeout(my.timerID):my.timerID=setTimeout(autoMove,my.auto[1]);
}

//改变选项卡
functionchangeOption(obj)
{
arrMenu[my.index].className=getClass(arrMenu[my.index],my.style[0]);//修改旧内容
arrInfo[my.index].style.display="none";//隐藏旧内容

obj.className=getClass(obj,my.style[1]);//修改为新样式
arrInfo[obj.index].style.display="";//显示新内容

my.index=obj.index;//更新当前选择的index
}

/*
只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活
obj：目标对象。num：1为over，0为out
*/
functionchangeTitle(obj,num)
{
if(!my.overStyle){return;};
if(obj.index!=my.index){obj.className=getClass(obj,my.style[num])}
}

/*
菜单类型时用
obj：目标对象。num：1为over，0为out
*/
functionchangeMenu(num)
{
if(!my.menu){return;}
num==0?my.menutimerID=setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
}

//关闭菜单
functionmenuClose()
{
arrInfo[my.index].style.display="none";
arrMenu[my.index].className=my.style[0];
}

//得到className（防止将原有样式覆盖）
functiongetClass(o,s)
{
if(o.cName==""){returns}
else{returno.cName+""+s}
}

//嵌套情况下得到真正的子集
functiongetChilds(arrObj,id,num)
{
vardepth=0;
varfirstObj=my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);//得到第一个子集
do//计算深度
{
if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
firstObj=firstObj.parentNode;
}
while(firstObj.tagName.toLowerCase()!="body")//body强制退出。

vart;
vararr=newArray();
for(i=0;i{
t=arrObj[i],d=0;
do
{
if(t.parentNode.getAttribute("id")==id&&d==depth)
{
arr.push(arrObj[i]);break;//得到数据
}
else
{
if(d==depth){break};d+=1;
}
t=t.parentNode;
}
while(t.tagName.toLowerCase()!="body")//body强制退出
}
returnarr;
}
}
}
window.onload=function()
{
varaa=newopCard();
aa.bind=["a1","div","b1","div"];
aa.style=["a1_0","a1_1","a1_0"];
aa.index=0;
aa.nesting=[false,true,"",""]
aa.creat();
aa=null;

//默认的onclick中，第一个例子
varbba=newopCard();
bba.bind=["a2","li","b2","div"];
bba.style=["style1","style2","style3"];
bba.overStyle=true;
bba.creat();
bba=null;

//默认的onclick中，第二个例子
varbbb=newopCard();
bbb.bind=["a3","li","b3","div"];
bbb.style=["style1","style2","style3"];
bbb.overStyle=true;
bbb.creat();
bbb=null;

//onmousover触发中的例子
varcc=newopCard();
cc.bind=["a4","li","b4","div"];
cc.style=["style1","style2","style3"];
cc.overStyle=true;
cc.overChange=true;
cc.creat();
cc=null;

//自动播放auto第一个例子
vardd=newopCard();
dd.bind=["a5","li","b5","div"];
dd.style=["style1","style2","style3"];
dd.auto=[true,3000];
dd.creat();
dd=null;

//自动播放auto第二个例子
varee=newopCard();
ee.bind=["a6","li","b6","div"];
ee.style=["style1","style2","style3"];
ee.auto=[true,2000];
ee.overChange=true;
ee.creat();
ee=null;

//自动播放auto第三个例子
varff=newopCard();
ff.bind=["a7","li","b7","div"];
ff.style=["style1","style2","style3"];
ff.auto=[true,1000];
ff.overChange=true;
ff.overStyle=true;
ff.creat();
ff=null;

//菜单导航例子
vargg=newopCard();
gg.bind=["a8","li","b8","div"];
gg.style=["style1","style2","style3"];
gg.overStyle=true;
gg.menu=true;
gg.creat();
gg=null;

//其他应用
varhh=newopCard();
hh.bind=["a9","li","a9","li"];
hh.style=["style4","style4","style4"];
//hh.overStyle=true;
hh.auto=[true,1000];
hh.creat();
hh=null;
}


body{font-size:12px;font-family:Verdana,"宋体";}
p,ul{margin:0px;padding:0px;}
td,div{font-size:12px}
.a1_0{border:1pxdotted#3399FF;width:120px;background-color:#f5f5f5;margin:3px;padding:2px0px;cursor:pointer;}
.a1_1{border:1pxsolid#FF9900;width:120px;margin:3px;padding:2px0px;cursor:pointer;}
.test{text-decoration:underline;}
#b1div.s{border:1pxsolid#999999;width:90%;height:500px;margin:3px;padding:10px;overflow-y:auto;line-height:18px;}
#b1div.sstrong{color:#0066FF;}
/**/
.style1{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#3399FF;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}
.style2{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#FF9900;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}
.style3{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#666666;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8{height:22px;}
#b2div,#b3div,#b4div,#b5div,#b6div,#b7div{border:1pxsolid#FF9900;height:100px;width:400px;padding:5px;overflow-y:auto;}
#b8div{border:1pxsolid#FF9900;height:20px;width:350px;padding:2px5px;}
#b8diva{margin-right:20px;}
.style4{float:left;background-color:#999999;text-align:left;list-style-type:none;padding:2px5px;color:#FFFFFF;}






简单介绍