CSS选项卡之一
来源:互联网 发布:windows 用户界面设计 编辑:程序博客网 时间:2024/05/19 22:03
- <!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("菜单和内容必须拥有相同的数量/n如果需要,你可以放一个空的在那占位。")}
- // 修正
- 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}
- firstObjfirstObj = 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;
- }
- tt = 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">
- <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>
- <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">
- <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">
- <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>
- <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>
- <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>