摘一个很不错的网页选项卡效果的源代码,经测试可用:
经常看到人问选项卡或者类似选项卡的切换效果
这里封装了个js,希望对大家有用
所有代码都在下面了
代码不多的,只有几k,如果压缩下还要小几k
前面有一处漏了附加样式
修正下。。
摘编自【http://bbs.blueidea.com/thread-2829065-1-1.html】
经常看到人问选项卡或者类似选项卡的切换效果
这里封装了个js,希望对大家有用
所有代码都在下面了
代码不多的,只有几k,如果压缩下还要小几k
前面有一处漏了附加样式
修正下。。
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 井底的蛙 </ title >
< script type ="text/javascript" >
/*
选项卡封装
by 井底的蛙
2008-2-4
*/
opCard = function()
{
this.bind = new Array();
this.index = 0; //默认显示哪个选项卡,从0开始
this.style = new Array(); //["","",""]
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]);
var my = this, i;
var argLen = arguments.length;
var arrM = new Array();
if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套
{ // 过滤出需要的数据
var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
}
else
{
var arrMenu = _arrMenu;
var arrInfo = _arrInfo;
}
var l = arrMenu.length;
if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量 如果需要,你可以放一个空的在那占位。")}
// 修正
if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单,则没有自动运行,有over, out直接激活
// 循环添加各个事件等
for(i=0;i<l;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])
}
// 自动播放
function autoMove()
{
var n;
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暂时无用。 -_-!!
function autoStop(obj, num)
{
if(!my.auto[0]){return;}
//if(obj.index==my.index)
num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
}
// 改变选项卡
function changeOption(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
*/
function changeTitle(obj, num)
{
if(!my.overStyle){return;};
if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
}
/*
菜单类型时用
obj:目标对象。 num:1为over,0为out
*/
function changeMenu(num)
{
if(!my.menu){return;}
num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
}
//关闭菜单
function menuClose()
{
arrInfo[my.index].style.display = "none";
arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
}
// 得到className(防止将原有样式覆盖)
function getClass(o, s)
{
if(o.cName==""){return s}
else{return o.cName + " " + s}
}
//嵌套情况下得到真正的子集
function getChilds(arrObj, id, num)
{
var depth = 0;
var firstObj = 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强制退出。
var t;
var arr = new Array();
for(i=0;i<arrObj.length;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强制退出
}
return arr;
}
}
}
window.onload = function()
{
var aa = new opCard();
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中,第一个例子
var bba = new opCard();
bba.bind = ["a2","li","b2","div"];
bba.style = ["style1","style2","style3"];
bba.overStyle = true;
bba.creat();
bba = null;
// 默认的onclick中,第二个例子
var bbb = new opCard();
bbb.bind = ["a3","li","b3","div"];
bbb.style = ["style1","style2","style3"];
bbb.overStyle = true;
bbb.creat();
bbb = null;
// onmousover触发中的例子
var cc = new opCard();
cc.bind = ["a4","li","b4","div"];
cc.style = ["style1","style2","style3"];
cc.overStyle = true;
cc.overChange = true;
cc.creat();
cc = null;
//自动播放auto第一个例子
var dd = new opCard();
dd.bind = ["a5","li","b5","div"];
dd.style = ["style1","style2","style3"];
dd.auto = [true, 3000];
dd.creat();
dd = null;
//自动播放auto第二个例子
var ee = new opCard();
ee.bind = ["a6","li","b6","div"];
ee.style = ["style1","style2","style3"];
ee.auto = [true, 2000];
ee.overChange = true;
ee.creat();
ee = null;
//自动播放auto第三个例子
var ff = new opCard();
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;
//菜单导航例子
var gg = new opCard();
gg.bind = ["a8","li","b8","div"];
gg.style = ["style1","style2","style3"];
gg.overStyle = true;
gg.menu = true;
gg.creat();
gg = null;
//其他应用
var hh = new opCard();
hh.bind = ["a9","li","a9","li"];
hh.style = ["style4","style4","style4"];
//hh.overStyle = true;
hh.auto = [true, 1000];
hh.creat();
hh = null;
}
</ script >
< style type ="text/css" >
body{font-size:12px; font-family:Verdana,"宋体";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</ style >
</ head >
< body >
< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
< tr >
< td id ="a1" width ="140" valign ="top" align ="center" >
< div class ="test" > 简单介绍 </ div >
< div class ="test" > 默认的onclick </ div >
< div class ="test" > onmousover触发 </ div >
< div class ="test" > 自动播放auto </ div >
< div class ="test" > 菜单导航 </ div >
< div class ="test" > 关于嵌套 </ div >
< div class ="test" > 其他应用 </ div >
< div class ="test" > 一些说明 </ div >
< div class ="test" > </ div >
< div class ="test" > </ div >
< div class ="test" > </ div >
< div class ="test" > </ div >
</ td >
< td id ="b1" valign ="top" >
< div class ="s" >
封装了一个选项卡,不过已经不像选项卡了-_-!!! < br >< br >
现稍微说明下吧,如果不明白的话,旁边有几个例子可能说明起来更清楚些 < br >< br >
< p >
< strong > obj.bind = ["a1","td","b1","div"]; </ strong >< br >
绑定id="a1"下的td标签为菜单,绑定id="b1"下的div标签为内容,简单么? < br >
td标签的数量和div标签的数量必须相同 < br >
(若不需要显示内容,只显示菜单话,可以这个在td标签上加 < td skip="true" > ) < br >
如果id="a1"下的td标签有嵌套表格,这样的话,就不是所有的td都是菜单,这时候需要用下nesting < br >< br >
< strong > obj.nesting = [false,true,"",""]; </ strong >< br >
当标签tag有嵌套时,需要用到这个 < br >
比如选项卡内容是放在div容器里,而本身这个内容里也有div标签,这时就需要用到 < br >
菜单嵌套为false,内容嵌套为true,且会自动判断出内容标签,多数时候这样就可以了 < br >
判断方法为,认定getElementsByTagName后第一个标签为内容第一项,其他的就用这个第一项的深度来判断 < br >
但有些情况下,这样还是不行 < br >
我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"]; < br >
这样就肯定不会错了(不明白的话看下例子就简单多了) < br >< br >
< strong > obj.index = 0; </ strong >< br >
默认显示第几个选项卡,序号从0开始 < br >< br >
< strong > obj.style = ["c1","c2","c3"] </ strong >< br >
菜单加载的样式的className: < br >
菜单未选中的className是c1 < br >
菜单选中的className是c2 < br >
菜单onmouseover的className是c3 < br >< br >
< strong > obj.overStyle = false; </ strong >< br >
选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容],对应的样式为style[2] < br >< br >
< strong > obj.overChange = false; </ strong >< br >
选项卡内容是否用onmouseover, onmouseout直接激活 < br >< br >
< strong > obj.menu = false; </ strong >< br >
选项卡是菜单类型 < br >< br >
< strong > obj.auto = [false, 1000]; </ strong >< br >
选项卡是否自动播放,播放速度(毫秒) < br >< br >
< strong > obj.creat(); </ strong >< br >
开始生成选项卡,需要onclick触发事件的话,可以obj.creat(函数名) < br >
所有的都会触发
</ p >
</ div >
< div class ="s" >
<!-- 默认的onclick中,第一个例子 -->
< div id ="a2" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b2" >
< div > 这个例子是用onclick触发的 < br > 并设置overStyle = true; < br > (over,out改变样式,但不激活) </ div >
< div >
var bba = new opCard(); < br >
bba.bind = ["a2","li","b2","div"]; < br >
bba.style = ["style1","style2","style1"]; < br >
bba.overStyle = true; < br >
bba.creat(); < br >
bba = null;
</ div >
< div > 33333 </ div >
< div > 4444444 </ div >
</ div >< br >
<!-- 默认的onclick中,第二个例子 -->
< div id ="a3" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li skip ="true" > 4 </ li >
</ ul >
</ div >
< div id ="b3" >
< div >
这个例子是比上面增加skip="true" < br > 即 < li skip="true" > 4 < /li > < br > 所以选项卡4是没有内容的 < br >
你可以为选项卡的文字直接加上链接,我这里就不加了
</ div >
< div > 222222 </ div >
< div > 33333 </ div >
< div > 4444444 </ div >
</ div >
</ div >
< div class ="s" >
<!-- onmousover触发中的例子 -->
< div id ="a4" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li skip ="true" > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b4" >
< div > 这个例子是用onmouseover触发的 < br > (over,out直接激活) < br > 并且 < li skip="true" > 3 < /li > [选项卡3不会被激活] < br > overStyle = true; </ div >
< div >
var cc = new opCard(); < br >
cc.bind = ["a4","li","b4","div"]; < br >
cc.style = ["style1","style2","style1"]; < br >
cc.overStyle = true; < br >
cc.overChange = true; < br >
cc.creat(); < br >
cc = null;
</ div >
< div > 33333 </ div >
< div > 4444444 </ div >
</ div >
</ div >
< div class ="s" >
<!-- 自动播放auto第一个例子 -->
< div id ="a5" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b5" >
< div > 1111111 < br > 我每3秒切换一个选项卡 </ div >
< div >
var ee = new opCard(); < br >
ee.bind = ["a6","li","b6","div"]; < br >
ee.style = ["style1","style2","style1"]; < br >
ee.auto = [true, 2000]; < br >
ee.overChange = true; < br >
ee.creat(); < br >
ee = null;
</ div >
< div > 33333 < br > 我每3秒切换一个选项卡 </ div >
< div > 4444444 < br > 我每3秒切换一个选项卡 </ div >
</ div >
< div > 注: < strong > 鼠标在选项卡任意位置都会使停止播放 </ strong >< br >< br > 下面这个结合overChange一起 </ div >
<!-- 自动播放auto第二个例子 -->
< div id ="a6" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b6" >
< div > 1111111 < br > 我每2秒切换一个选项卡 </ div >
< div >
var dd = new opCard(); < br >
dd.bind = ["a5","li","b5","div"]; < br >
dd.style = ["style1","style2","style1"]; < br >
dd.auto = [true, 3000]; < br >
dd.creat(); < br >
dd = null; < br >
</ div >
< div > 33333 < br > 我每2秒切换一个选项卡 </ div >
< div > 4444444 < br > 我每2秒切换一个选项卡 </ div >
</ div >
< div >< br > 下面这个再来个 < li skip="true" > 3 < /li > ,且overStyle=true; </ div >
<!-- 自动播放auto第三个例子 -->
< div id ="a7" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li skip ="true" > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b7" >
< div > 1111111 < br > 我每1秒切换一个选项卡 </ div >
< div >
var ff = new opCard(); < br >
ff.bind = ["a7","li","b7","div"]; < br >
ff.style = ["style1","style2","style1"]; < br >
ff.auto = [true, 1000]; < br >
ff.overChange = true; < br >
ff.overStyle = true; < br >
ff.creat(); < br >
ff = null;
</ div >
< div > 33333 < br > 我每1秒切换一个选项卡 </ div >
< div > 4444444 < br > 我每1秒切换一个选项卡 </ div >
</ div >
</ div >
<!-- 菜单导航的例子 -->
< div class ="s" >
< div id ="a8" >
< ul >
< li skip ="true" > 首页 </ li >
< li > 新闻 </ li >
< li > 论坛 </ li >
< li skip ="true" > 联系我们 </ li >
</ ul >
</ div >
< div id ="b8" >
< div ></ div >
< div >< a href ="#" > 国内新闻 </ a >< a href ="#" > 国际新闻 </ a >< a href ="#" > 娱乐新闻 </ a >< a href ="#" > 体育新闻 </ a ></ div >
< div >< a href ="#" > 蓝色理想 </ a >< a href ="#" > blue idea </ a ></ div >
< div ></ div >
</ div >
< div >< strong > 注:菜单延时一秒关闭 </ strong >< br > 这里只是演示,实际可以设置下position什么的。-o- < br > 多级菜单不知道能不能支持,没试过 </ div >
</ div >
< div class ="s" >
我见过的许多选项卡都不能用来嵌套 < br > 但还是有些时候会用到的 < br >
所以如您所见,这个演示本身就是一个嵌套,效果还不错
</ div >
<!-- 其他应用 -->
< div class ="s" >
比如图片切换什么,不过我太懒了,不写了。。。 < br >
这个能干什么,我也不知道。。
< div id ="a9" >
< li > 新年好啊 </ li >
< li > 快过年了 </ li >
< li > 天好冷啊 </ li >
< li > 大家去抢红包吧 </ li >
< li > 红包~!红包~!你在哪里啊? </ li >
</ div >
</ div >
< div class ="s" >
选项卡标题(或者菜单)必须和选项卡内容的数量相同,否则会出错 < br > 即使选项卡菜单skip="true",内容也要放一个空的标签占位 < br >
其他好像暂时没发现什么 < br >< br >
本来打算加入ajax的,但有些还没想好。 < br >
效率的话,应该还行,我这个演示放了几个选项卡,似乎还不错 < br >< br >
写这个的目的就是以后弄选项卡只要处理样式就可以了,很多选项卡或者切换之类都是大同小异 < br >
本来是打算弄些特效在里面,考虑会增加不少代码,所以不加了,简洁点。 < br >< br >
哦,还有选项卡是附加样式,不会取消原本设置的样式 < br >
如左边的下划线是原有的样式
</ div >
< div class ="s" > 啥都没有1 </ div >
< div class ="s" > 啥都没有2 </ div >
< div class ="s" > 啥都没有3 </ div >
< div class ="s" > 啥都没有4 </ div >
</ td >
</ tr >
</ table >
</ body >
</ html >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > 井底的蛙 </ title >
< script type ="text/javascript" >
/*
选项卡封装
by 井底的蛙
2008-2-4
*/
opCard = function()
{
this.bind = new Array();
this.index = 0; //默认显示哪个选项卡,从0开始
this.style = new Array(); //["","",""]
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]);
var my = this, i;
var argLen = arguments.length;
var arrM = new Array();
if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套
{ // 过滤出需要的数据
var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
}
else
{
var arrMenu = _arrMenu;
var arrInfo = _arrInfo;
}
var l = arrMenu.length;
if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量 如果需要,你可以放一个空的在那占位。")}
// 修正
if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单,则没有自动运行,有over, out直接激活
// 循环添加各个事件等
for(i=0;i<l;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])
}
// 自动播放
function autoMove()
{
var n;
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暂时无用。 -_-!!
function autoStop(obj, num)
{
if(!my.auto[0]){return;}
//if(obj.index==my.index)
num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
}
// 改变选项卡
function changeOption(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
*/
function changeTitle(obj, num)
{
if(!my.overStyle){return;};
if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
}
/*
菜单类型时用
obj:目标对象。 num:1为over,0为out
*/
function changeMenu(num)
{
if(!my.menu){return;}
num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
}
//关闭菜单
function menuClose()
{
arrInfo[my.index].style.display = "none";
arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
}
// 得到className(防止将原有样式覆盖)
function getClass(o, s)
{
if(o.cName==""){return s}
else{return o.cName + " " + s}
}
//嵌套情况下得到真正的子集
function getChilds(arrObj, id, num)
{
var depth = 0;
var firstObj = 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强制退出。
var t;
var arr = new Array();
for(i=0;i<arrObj.length;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强制退出
}
return arr;
}
}
}
window.onload = function()
{
var aa = new opCard();
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中,第一个例子
var bba = new opCard();
bba.bind = ["a2","li","b2","div"];
bba.style = ["style1","style2","style3"];
bba.overStyle = true;
bba.creat();
bba = null;
// 默认的onclick中,第二个例子
var bbb = new opCard();
bbb.bind = ["a3","li","b3","div"];
bbb.style = ["style1","style2","style3"];
bbb.overStyle = true;
bbb.creat();
bbb = null;
// onmousover触发中的例子
var cc = new opCard();
cc.bind = ["a4","li","b4","div"];
cc.style = ["style1","style2","style3"];
cc.overStyle = true;
cc.overChange = true;
cc.creat();
cc = null;
//自动播放auto第一个例子
var dd = new opCard();
dd.bind = ["a5","li","b5","div"];
dd.style = ["style1","style2","style3"];
dd.auto = [true, 3000];
dd.creat();
dd = null;
//自动播放auto第二个例子
var ee = new opCard();
ee.bind = ["a6","li","b6","div"];
ee.style = ["style1","style2","style3"];
ee.auto = [true, 2000];
ee.overChange = true;
ee.creat();
ee = null;
//自动播放auto第三个例子
var ff = new opCard();
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;
//菜单导航例子
var gg = new opCard();
gg.bind = ["a8","li","b8","div"];
gg.style = ["style1","style2","style3"];
gg.overStyle = true;
gg.menu = true;
gg.creat();
gg = null;
//其他应用
var hh = new opCard();
hh.bind = ["a9","li","a9","li"];
hh.style = ["style4","style4","style4"];
//hh.overStyle = true;
hh.auto = [true, 1000];
hh.creat();
hh = null;
}
</ script >
< style type ="text/css" >
body{font-size:12px; font-family:Verdana,"宋体";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</ style >
</ head >
< body >
< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
< tr >
< td id ="a1" width ="140" valign ="top" align ="center" >
< div class ="test" > 简单介绍 </ div >
< div class ="test" > 默认的onclick </ div >
< div class ="test" > onmousover触发 </ div >
< div class ="test" > 自动播放auto </ div >
< div class ="test" > 菜单导航 </ div >
< div class ="test" > 关于嵌套 </ div >
< div class ="test" > 其他应用 </ div >
< div class ="test" > 一些说明 </ div >
< div class ="test" > </ div >
< div class ="test" > </ div >
< div class ="test" > </ div >
< div class ="test" > </ div >
</ td >
< td id ="b1" valign ="top" >
< div class ="s" >
封装了一个选项卡,不过已经不像选项卡了-_-!!! < br >< br >
现稍微说明下吧,如果不明白的话,旁边有几个例子可能说明起来更清楚些 < br >< br >
< p >
< strong > obj.bind = ["a1","td","b1","div"]; </ strong >< br >
绑定id="a1"下的td标签为菜单,绑定id="b1"下的div标签为内容,简单么? < br >
td标签的数量和div标签的数量必须相同 < br >
(若不需要显示内容,只显示菜单话,可以这个在td标签上加 < td skip="true" > ) < br >
如果id="a1"下的td标签有嵌套表格,这样的话,就不是所有的td都是菜单,这时候需要用下nesting < br >< br >
< strong > obj.nesting = [false,true,"",""]; </ strong >< br >
当标签tag有嵌套时,需要用到这个 < br >
比如选项卡内容是放在div容器里,而本身这个内容里也有div标签,这时就需要用到 < br >
菜单嵌套为false,内容嵌套为true,且会自动判断出内容标签,多数时候这样就可以了 < br >
判断方法为,认定getElementsByTagName后第一个标签为内容第一项,其他的就用这个第一项的深度来判断 < br >
但有些情况下,这样还是不行 < br >
我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"]; < br >
这样就肯定不会错了(不明白的话看下例子就简单多了) < br >< br >
< strong > obj.index = 0; </ strong >< br >
默认显示第几个选项卡,序号从0开始 < br >< br >
< strong > obj.style = ["c1","c2","c3"] </ strong >< br >
菜单加载的样式的className: < br >
菜单未选中的className是c1 < br >
菜单选中的className是c2 < br >
菜单onmouseover的className是c3 < br >< br >
< strong > obj.overStyle = false; </ strong >< br >
选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容],对应的样式为style[2] < br >< br >
< strong > obj.overChange = false; </ strong >< br >
选项卡内容是否用onmouseover, onmouseout直接激活 < br >< br >
< strong > obj.menu = false; </ strong >< br >
选项卡是菜单类型 < br >< br >
< strong > obj.auto = [false, 1000]; </ strong >< br >
选项卡是否自动播放,播放速度(毫秒) < br >< br >
< strong > obj.creat(); </ strong >< br >
开始生成选项卡,需要onclick触发事件的话,可以obj.creat(函数名) < br >
所有的都会触发
</ p >
</ div >
< div class ="s" >
<!-- 默认的onclick中,第一个例子 -->
< div id ="a2" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b2" >
< div > 这个例子是用onclick触发的 < br > 并设置overStyle = true; < br > (over,out改变样式,但不激活) </ div >
< div >
var bba = new opCard(); < br >
bba.bind = ["a2","li","b2","div"]; < br >
bba.style = ["style1","style2","style1"]; < br >
bba.overStyle = true; < br >
bba.creat(); < br >
bba = null;
</ div >
< div > 33333 </ div >
< div > 4444444 </ div >
</ div >< br >
<!-- 默认的onclick中,第二个例子 -->
< div id ="a3" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li skip ="true" > 4 </ li >
</ ul >
</ div >
< div id ="b3" >
< div >
这个例子是比上面增加skip="true" < br > 即 < li skip="true" > 4 < /li > < br > 所以选项卡4是没有内容的 < br >
你可以为选项卡的文字直接加上链接,我这里就不加了
</ div >
< div > 222222 </ div >
< div > 33333 </ div >
< div > 4444444 </ div >
</ div >
</ div >
< div class ="s" >
<!-- onmousover触发中的例子 -->
< div id ="a4" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li skip ="true" > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b4" >
< div > 这个例子是用onmouseover触发的 < br > (over,out直接激活) < br > 并且 < li skip="true" > 3 < /li > [选项卡3不会被激活] < br > overStyle = true; </ div >
< div >
var cc = new opCard(); < br >
cc.bind = ["a4","li","b4","div"]; < br >
cc.style = ["style1","style2","style1"]; < br >
cc.overStyle = true; < br >
cc.overChange = true; < br >
cc.creat(); < br >
cc = null;
</ div >
< div > 33333 </ div >
< div > 4444444 </ div >
</ div >
</ div >
< div class ="s" >
<!-- 自动播放auto第一个例子 -->
< div id ="a5" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b5" >
< div > 1111111 < br > 我每3秒切换一个选项卡 </ div >
< div >
var ee = new opCard(); < br >
ee.bind = ["a6","li","b6","div"]; < br >
ee.style = ["style1","style2","style1"]; < br >
ee.auto = [true, 2000]; < br >
ee.overChange = true; < br >
ee.creat(); < br >
ee = null;
</ div >
< div > 33333 < br > 我每3秒切换一个选项卡 </ div >
< div > 4444444 < br > 我每3秒切换一个选项卡 </ div >
</ div >
< div > 注: < strong > 鼠标在选项卡任意位置都会使停止播放 </ strong >< br >< br > 下面这个结合overChange一起 </ div >
<!-- 自动播放auto第二个例子 -->
< div id ="a6" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b6" >
< div > 1111111 < br > 我每2秒切换一个选项卡 </ div >
< div >
var dd = new opCard(); < br >
dd.bind = ["a5","li","b5","div"]; < br >
dd.style = ["style1","style2","style1"]; < br >
dd.auto = [true, 3000]; < br >
dd.creat(); < br >
dd = null; < br >
</ div >
< div > 33333 < br > 我每2秒切换一个选项卡 </ div >
< div > 4444444 < br > 我每2秒切换一个选项卡 </ div >
</ div >
< div >< br > 下面这个再来个 < li skip="true" > 3 < /li > ,且overStyle=true; </ div >
<!-- 自动播放auto第三个例子 -->
< div id ="a7" >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li skip ="true" > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id ="b7" >
< div > 1111111 < br > 我每1秒切换一个选项卡 </ div >
< div >
var ff = new opCard(); < br >
ff.bind = ["a7","li","b7","div"]; < br >
ff.style = ["style1","style2","style1"]; < br >
ff.auto = [true, 1000]; < br >
ff.overChange = true; < br >
ff.overStyle = true; < br >
ff.creat(); < br >
ff = null;
</ div >
< div > 33333 < br > 我每1秒切换一个选项卡 </ div >
< div > 4444444 < br > 我每1秒切换一个选项卡 </ div >
</ div >
</ div >
<!-- 菜单导航的例子 -->
< div class ="s" >
< div id ="a8" >
< ul >
< li skip ="true" > 首页 </ li >
< li > 新闻 </ li >
< li > 论坛 </ li >
< li skip ="true" > 联系我们 </ li >
</ ul >
</ div >
< div id ="b8" >
< div ></ div >
< div >< a href ="#" > 国内新闻 </ a >< a href ="#" > 国际新闻 </ a >< a href ="#" > 娱乐新闻 </ a >< a href ="#" > 体育新闻 </ a ></ div >
< div >< a href ="#" > 蓝色理想 </ a >< a href ="#" > blue idea </ a ></ div >
< div ></ div >
</ div >
< div >< strong > 注:菜单延时一秒关闭 </ strong >< br > 这里只是演示,实际可以设置下position什么的。-o- < br > 多级菜单不知道能不能支持,没试过 </ div >
</ div >
< div class ="s" >
我见过的许多选项卡都不能用来嵌套 < br > 但还是有些时候会用到的 < br >
所以如您所见,这个演示本身就是一个嵌套,效果还不错
</ div >
<!-- 其他应用 -->
< div class ="s" >
比如图片切换什么,不过我太懒了,不写了。。。 < br >
这个能干什么,我也不知道。。
< div id ="a9" >
< li > 新年好啊 </ li >
< li > 快过年了 </ li >
< li > 天好冷啊 </ li >
< li > 大家去抢红包吧 </ li >
< li > 红包~!红包~!你在哪里啊? </ li >
</ div >
</ div >
< div class ="s" >
选项卡标题(或者菜单)必须和选项卡内容的数量相同,否则会出错 < br > 即使选项卡菜单skip="true",内容也要放一个空的标签占位 < br >
其他好像暂时没发现什么 < br >< br >
本来打算加入ajax的,但有些还没想好。 < br >
效率的话,应该还行,我这个演示放了几个选项卡,似乎还不错 < br >< br >
写这个的目的就是以后弄选项卡只要处理样式就可以了,很多选项卡或者切换之类都是大同小异 < br >
本来是打算弄些特效在里面,考虑会增加不少代码,所以不加了,简洁点。 < br >< br >
哦,还有选项卡是附加样式,不会取消原本设置的样式 < br >
如左边的下划线是原有的样式
</ div >
< div class ="s" > 啥都没有1 </ div >
< div class ="s" > 啥都没有2 </ div >
< div class ="s" > 啥都没有3 </ div >
< div class ="s" > 啥都没有4 </ div >
</ td >
</ tr >
</ table >
</ body >
</ html >
摘编自【http://bbs.blueidea.com/thread-2829065-1-1.html】