一个多层叠自适应宽度的TAB选项卡

近日为www.chevivi.com制作网页时遇到一个品牌大全的栏框，在170象素宽300高的范围列全年有汽车品牌。直接排列显然空间是不够用的。于是选择了以品牌首字母做分类显示的方法制成TAB选项卡的形式。

还有个问题就是这个栏框会在不同的页面出现，而且出现时在每个页面的尺寸都有所不同。为了能在开发时制成一个控件，以便直接维护和调用，只能用JS做成可以自适应宽度，自动识别行数。如图所示

运行时自行更改css中 .nonstop 中的 width值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>多层叠TAB选项卡－Web公社-artwc.com</title>
<style type="text/css">
.nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; }
.nonstop span { float:left;_display:inline; cursor:pointer; width:22px; height:14px; background:#cdcdcd url(./img/button.gif) no-repeat -175px top; font-size:10px; line-height:14px; margin:2px 0 0 2px; display:inline; text-align:center; }
.nonstop span:hover { background:gray; font-weight:bold }
.nonstop div { height:300px; clear:both; border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px; overflow:hidden; }
.nonstop div a { float:left; width:80px; height:40px; background:white; text-align:center; line-height:40px; padding-top:8px; margin:1px 0 0 1px; }
.nonstop div a img { border:0; }
.nonstop span.hot { border:1px solid red; width:20px; color:white; height:15px; background:red url(./img/button.gif) no-repeat -175px -14px; font-weight:bold; border-bottom:none; }
</style>
</head>
<body>
<!--顶部-->一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。<br>HTML：多个导航tag加一个放置默认内容div<br>脚本：以数组的形式给出每个导航对应的html
			<div class="nonstop" id="a2zbox"><!--内容区-->
				<span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span>
				<span>H</span><span>I</span>	<span>J</span><span>M</span><span>L</span><span>N</span><span>O</span>
				<span>P</span><span>S</span><span>T</span><span>U</span><span>Y</span><span>Z</span><span>!</span>
				<div><!--默认内容-->
					这里放一些默认内容
					<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1
				</div>
			</div>
			<script type="text/javascript">
				//20个字母下的品牌，不包含默认显示的内容
				var contHtml = ['a1','b2','c3','d4','e5','f6','g7','h21','i22','j23','m24','l25','n26','o27','p11','s12','t13','u14','y15','z16'];
				var a2zBox = document.getElementById("a2zbox");
				var a2zTag = a2zBox.getElementsByTagName("span");
				var a2zCont = a2zBox.getElementsByTagName("div")[0];
				var divs = [],colN=Math.floor(a2zCont.clientWidth/(a2zTag[0].clientWidth))//7;
				for(var n=1; n<a2zTag.length/colN; n++){
					divs[n-1] = document.createElement("div");
					divs[n-1].style.display = "none";
					a2zBox.insertBefore(divs[n-1],a2zTag[colN*n]);
				}
				divs.push(a2zCont);
				var hotbox = divs.length-1;//初始内容div ID
				var hotboxH = a2zCont.clientHeight; //内容div高度
				var hotboxHtemp = hotboxH; 
				var time = 50, space = 100;//滑动速度
				contHtml.push(a2zCont.innerHTML);
				function TABS(T){
					for( i=0; i<a2zTag.length; i++ )
						//a2zTag[i].removeAttribute("class");
						a2zTag[i].className="";
					a2zTag[T].className = "hot";
					var N=Math.ceil((T+1)/colN-1);
					divs[N].style.cssText = "display:block;border-color:red";
					divs[N].innerHTML = contHtml[T];
					if(N!=hotbox){
						divs[N].style.height = 0;
						divs[hotbox].style.border = 0 ;
						var wane = setInterval(function(){
							hotboxH -= space;
							divs[hotbox].style.height = hotboxH + "px"; 
							divs[N].style.height = (hotboxHtemp - hotboxH ) + "px"; 
							if(divs[hotbox].clientHeight < 1){
								clearInterval(wane);
								divs[hotbox].style.cssText = "display:none";
								hotbox=N;
								hotboxH = hotboxHtemp;
							}
						},time);
					}
				}
				Function.prototype.bind = function(){var __m = this; var arg = arguments; return function(){ __m.apply(window,arg); } }   
				for( i=0; i<a2zTag.length; i++ ) a2zTag[i].onclick = TABS.bind(i);
			</script>
</body>
</html>

提示：您可以先修改部分代码再运行，对于jquery等代码需要运行后刷新一次

上一篇：.net中如何获取浏览器类型

下一篇：滑动弹出效果

留下脚印压缩包密码:sosuo8

全部评论:

申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“ 一个多层叠自适应宽度的TAB选项卡 ”的原作者，若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法：email:ahuinan@21cn.com QQ:106494262

感谢以下网友对网站提出的建议：
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)

文章档案

作者：yfstudio
来源：经典论坛
日期：2009-9-5 17:02:00
点击：623

网友投票(您觉得这篇文章怎样？)

请稍侯......

实用文章总结

文章阅读排行

随便看看

最新评论