打印

[原创] 快过年了，给大家封装个选项卡js，大家新年好啊

本主题由 caiying2007 于 2008-2-4 12:06 设置高亮

WellFrog [楼主]

井底的蛙

高级会员

帖子: 351
体力: 658
威望: 3
当前: 上海浦东
离线: 2 天

专长 JS,ASP

1^# 大中小发表于 2008-2-4 11:10

在论坛里经常看到人问选项卡或者类似选项卡的切换效果
这里封装了个js，希望对大家有用
所有代码都在下面了
如果有错误或者建议，可以回贴告诉我，谢谢

<!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 = 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">&nbsp;</div>
		<div class="test">&nbsp;</div>
		<div class="test">&nbsp;</div>
		<div class="test">&nbsp;</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标签上加&lt;td skip="true"&gt;）<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>即&lt;li skip="true"&gt;4&lt;/li&gt;<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>并且&lt;li skip="true"&gt;3&lt;/li&gt;[选项卡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>下面这个再来个&lt;li skip="true"&gt;3&lt;/li&gt;，且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>

提示：您可以先修改部分代码再运行

本帖最近评分记录

帅青蛙威望 +3 谢谢分享 2008-2-4 13:09

郁闷中

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

ariex

Dreamlessness

金牌会员

帖子: 3531
体力: 3913
威望: 11
当前: 河南许昌

专长 前端制作,C#

2^# 大中小发表于 2008-2-4 11:13

效果相当的漂亮~

Opera下工作正常

silence is pretty good..

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

scat

无须猫

高级会员

帖子: 278
体力: 563
威望: 0

专长 网页设计,平面,前端制作

3^# 大中小发表于 2008-2-4 11:14

不错，收藏了先～谢谢分享～～

{SCS}

TOP

请大家尊重和保护奥运知识产权。

ylf575

初级会员

帖子: 39
体力: 87
威望: 0
当前: 辽宁鞍山

专长 PHP,ASP,.NET

4^# 大中小发表于 2008-2-4 12:28

谢谢分享

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

dashzhao

赵勇

银牌会员

帖子: 2193
体力: 1712
威望: 2
当前: 广东深圳
离线: 2 天

专长 网站运营,项目管理,推广

5^# 大中小发表于 2008-2-4 12:29

感觉其实这个不封装还好一些未必一个页面内我都会用上那样的话就有点代码冗余了

TOP

by0001

高级会员

帖子: 465
体力: 949
威望: 1
当前: 广东深圳
离线: 1 天

专长 前端制作

6^# 大中小发表于 2008-2-4 12:31

不错,FF下通过

TOP

ariex

Dreamlessness

金牌会员

帖子: 3531
体力: 3913
威望: 11
当前: 河南许昌

专长 前端制作,C#

7^# 大中小发表于 2008-2-4 12:52

引用:

原帖由 dashzhao 于 2008-2-4 12:29 发表
感觉其实这个不封装还好一些未必一个页面内我都会用上那样的话就有点代码冗余了

代码的封装在一定程度上是为了“懒虫”们~

silence is pretty good..

TOP

WellFrog [楼主]

井底的蛙

高级会员

帖子: 351
体力: 658
威望: 3
当前: 上海浦东
离线: 2 天

专长 JS,ASP

8^# 大中小发表于 2008-2-4 13:11

引用:

感觉其实这个不封装还好一些未必一个页面内我都会用上那样的话就有点代码冗余了

代码不多的，只有几k，如果压缩下还要小几k，呵呵

前面有一处漏了附加样式（直接覆盖了-_-!!）
修正下。。居然60分钟就不给修改了。。再发下

<!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}
				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">&nbsp;</div>
		<div class="test">&nbsp;</div>
		<div class="test">&nbsp;</div>
		<div class="test">&nbsp;</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标签上加&lt;td skip="true"&gt;）<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>即&lt;li skip="true"&gt;4&lt;/li&gt;<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>并且&lt;li skip="true"&gt;3&lt;/li&gt;[选项卡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>下面这个再来个&lt;li skip="true"&gt;3&lt;/li&gt;，且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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 WellFrog 于 2008-2-4 13:35 编辑 ]

郁闷中

TOP

jxf123521

新手上路

帖子: 16
体力: 37
威望: 0
当前: 上海普陀
离线: 1 天

9^# 大中小发表于 2008-2-4 13:39

收藏，经典，

点滴功夫！

TOP

心之语

初级会员

帖子: 23
体力: 71
威望: 0
离线: 199 天

10^# 大中小发表于 2008-2-4 18:23

很好,很强大!

不知道能不能加一个像firefox或excel那样,在很多标签的时候有个箭头来移动?

TOP

YKAI

苹果王

中级会员

帖子: 380
体力: 493
威望: 1
当前: 浙江杭州

11^# 大中小发表于 2008-2-15 14:48

不过真的很佩服LZ,头一次看见clear:left;然后又来个float的用法，
很巧很如意。
很深很舒服。

熊熊，大雨就快停了，彩虹也要出来啊。

TOP

asdfgasdfg1

黑色瞳孔

银牌会员

帖子: 611
体力: 1088
威望: 0
当前: 大洋州澳大利亚
离线: 62 天

12^# 大中小发表于 2008-2-15 15:29

IE6下有点问题....

TOP

xuxiong

初级会员

帖子: 84
体力: 158
威望: 0
当前: 四川成都
离线: 2 天

13^# 大中小发表于 2008-3-14 00:17

Ucren 文档中心版本:3.2.5

http://widgets.ucren.com/ucren-documentation/index.html

这个很好很强大

漫步人生路

TOP

yangliangy

雨是云的梦

银牌会员

帖子: 1492
体力: 1074
威望: 0
当前: 广东深圳
离线: 1 天

专长 JS,ASP,.NET

14^# 大中小发表于 2008-3-14 01:55

引用:

原帖由 xuxiong 于 2008-3-14 00:17 发表
 http://widgets.ucren.com/ucren-documentation/index.html

这个很好很强大

看了一下,真的好强大,是不是我下载这个框架下来,按照里面的说明安装好,然后简单的几句代码就要以做很多需要的东西出来.原来框架是起这个作用(看来我很菜),难怪以前看到很多ajax框架

如果我将将东西搬到web上,是不是只要将相关的js框架的文件传上去就行了.

地理...

TOP

yangliangy

雨是云的梦

银牌会员

帖子: 1492
体力: 1074
威望: 0
当前: 广东深圳
离线: 1 天

专长 JS,ASP,.NET

15^# 大中小发表于 2008-3-14 01:56

附上图片

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

地理...

TOP

gaoqun2

初级会员

帖子: 24
体力: 52
威望: 0
当前: 浙江嘉兴
离线: 11 天

16^# 大中小发表于 2008-7-18 11:52

楼上的相当完美，能把代码发上来？？

TOP

kabukon

中级会员

帖子: 513
体力: 320
威望: 0
当前: 上海静安
离线: 34 天

专长 前端制作,JS

17^# 大中小发表于 2008-7-18 11:53

我晕,楼上的挖坟啊

TOP

weiwcg2184

新手上路

帖子: 27
体力: 40
威望: 0
当前: 湖北武汉
离线: 1 天

18^# 大中小发表于 2008-9-1 09:50

不错！

曾经的迷茫

TOP

[原创] 快过年了，给大家封装个选项卡js，大家新年好啊

引用:

引用:

Ucren 文档中心 版本:3.2.5

引用:

Ucren 文档中心版本:3.2.5