Javascript 标签页(TAB)浏览控件推介之:DOMTab

如何在越来越显得狭小的页面空间上显示更多内容?相信很多人立即想到的就是标签页(TAB),她允许在同一个地方显示多个内容。标签页有很多种制作方法,本文介绍的是 Christian Heilmann 写的 DOMTab。

Javascript 标签页(TAB)浏览控件推介之:DOMTab – 示例

 
/*
	DOMtab Version 3.1415927
	Updated March the First 2006
	written by Christian Heilmann
	check blog for updates: http://www.wait-till-i.com	
	free to use, not free to resell
*/
 
domtab={
	tabClass:'domtab', // class to trigger tabbing
	listClass:'domtabs', // class of the menus
	activeClass:'active', // class of current link
	contentElements:'div', // elements to loop through
	backToLinks:/#top/, // pattern to check "back to top" links
	printID:'domtabprintview', // id of the print all link
	showAllLinkText:'show all content', // text for the print all link
	prevNextIndicator:'doprevnext', // class to trigger prev and next links
	prevNextClass:'prevnext', // class of the prev and next list
	prevLabel:'previous', // HTML content of the prev link
	nextLabel:'next', // HTML content of the next link
	prevClass:'prev', // class for the prev link
	nextClass:'next', // class for the next link
	init:function(){
		var temp;
		if(!document.getElementById || !document.createTextNode){return;}
		var tempelm=document.getElementsByTagName('div');		
		for(var i=0;i<tempelm.length;i++){
			if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}
			domtab.initTabMenu(tempelm[i]);
			domtab.removeBackLinks(tempelm[i]);
			if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){
				domtab.addPrevNext(tempelm[i]);
			}
			domtab.checkURL();
		}
		if(document.getElementById(domtab.printID) 
		   && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){
			var newlink=document.createElement('a');
			newlink.setAttribute('href','#');
			domtab.addEvent(newlink,'click',domtab.showAll,false);
			newlink.onclick=function(){return false;} // safari hack
			newlink.appendChild(document.createTextNode(domtab.showAllLinkText));
			document.getElementById(domtab.printID).appendChild(newlink);
		}
	},
	checkURL:function(){
		var id;
		var loc=window.location.toString();
		loc=/#/.test(loc)?loc.match(/#(w.+)/)[1]:'';
		if(loc==''){return;}
		var elm=document.getElementById(loc);
		if(!elm){return;}
		var parentMenu=elm.parentNode.parentNode.parentNode;
		parentMenu.currentSection=loc;
		parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none';
		domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass);
		var links=parentMenu.getElementsByTagName('a');
		for(i=0;i<links.length;i++){
			if(!links[i].getAttribute('href')){continue;}
			if(!/#/.test(links[i].getAttribute('href').toString())){continue;}
			id=links[i].href.match(/#(w.+)/)[1];
			if(id==loc){
				var cur=links[i].parentNode.parentNode;
				domtab.cssjs('add',links[i].parentNode,domtab.activeClass);
				break;
			}
		}
		domtab.changeTab(elm,1);
		elm.focus();
		cur.currentLink=links[i];
		cur.currentSection=loc;
	},
	showAll:function(e){
		document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID));
		var tempelm=document.getElementsByTagName('div');		
		for(var i=0;i<tempelm.length;i++){
			if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;}
			var sec=tempelm[i].getElementsByTagName(domtab.contentElements);
			for(var j=0;j<sec.length;j++){
				sec[j].style.display='block';
			}
		}
		var tempelm=document.getElementsByTagName('ul');		
		for(i=0;i<tempelm.length;i++){
			if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;}
			tempelm[i].parentNode.removeChild(tempelm[i]);
			i--;
		}
		domtab.cancelClick(e);
	},
	addPrevNext:function(menu){
		var temp;
		var sections=menu.getElementsByTagName(domtab.contentElements);
		for(var i=0;i<sections.length;i++){
			temp=domtab.createPrevNext();
			if(i==0){
				temp.removeChild(temp.getElementsByTagName('li')[0]);
			}
			if(i==sections.length-1){
				temp.removeChild(temp.getElementsByTagName('li')[1]);
			}
			temp.i=i; // h4xx0r!
			temp.menu=menu;
			sections[i].appendChild(temp);
		}
	},
	removeBackLinks:function(menu){
		var links=menu.getElementsByTagName('a');
		for(var i=0;i<links.length;i++){
			if(!domtab.backToLinks.test(links[i].href)){continue;}
			links[i].parentNode.removeChild(links[i]);
			i--;
		}
	},
	initTabMenu:function(menu){
		var id;
		var lists=menu.getElementsByTagName('ul');
		for(var i=0;i<lists.length;i++){
			if(domtab.cssjs('check',lists[i],domtab.listClass)){
				var thismenu=lists[i];
				break;
			}
		}
		if(!thismenu){return;}
		thismenu.currentSection='';
		thismenu.currentLink='';
		var links=thismenu.getElementsByTagName('a');
		for(i=0;i<links.length;i++){
			if(!/#/.test(links[i].getAttribute('href').toString())){continue;}
			id=links[i].href.match(/#(w.+)/)[1];
			if(document.getElementById(id)){
				domtab.addEvent(links[i],'click',domtab.showTab,false);
				links[i].onclick=function(){return false;} // safari hack
				domtab.changeTab(document.getElementById(id),0);
			}
		}
		id=links[0].href.match(/#(w.+)/)[1];
		if(document.getElementById(id)){
			domtab.changeTab(document.getElementById(id),1);
			thismenu.currentSection=id;
			thismenu.currentLink=links[0];
			domtab.cssjs('add',links[0].parentNode,domtab.activeClass);
		}
	},
	createPrevNext:function(){
		// this would be so much easier with innerHTML, darn you standards fetish!
		var temp=document.createElement('ul');
		temp.className=domtab.prevNextClass;
		temp.appendChild(document.createElement('li'));
		temp.getElementsByTagName('li')[0].appendChild(document.createElement('a'));
		temp.getElementsByTagName('a')[0].setAttribute('href','#');
		temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel;
		temp.getElementsByTagName('li')[0].className=domtab.prevClass;
		temp.appendChild(document.createElement('li'));
		temp.getElementsByTagName('li')[1].appendChild(document.createElement('a'));
		temp.getElementsByTagName('a')[1].setAttribute('href','#');
		temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel;
		temp.getElementsByTagName('li')[1].className=domtab.nextClass;
		domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false);
		domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false);
		// safari fix
		temp.getElementsByTagName('a')[0].onclick=function(){return false;}
		temp.getElementsByTagName('a')[1].onclick=function(){return false;}
		return temp;
	},
	navTabs:function(e){
		var li=domtab.getTarget(e);
		var menu=li.parentNode.parentNode.menu;
		var count=li.parentNode.parentNode.i;
		var section=menu.getElementsByTagName(domtab.contentElements);
		var links=menu.getElementsByTagName('a');
		var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1;
		section[count].style.display='none';
		domtab.cssjs('remove',links[count].parentNode,domtab.activeClass);
		section[othercount].style.display='block';
		domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass);
		var parent=links[count].parentNode.parentNode;
		parent.currentLink=links[othercount];
		parent.currentSection=links[othercount].href.match(/#(w.+)/)[1];
		domtab.cancelClick(e);
	},
	changeTab:function(elm,state){
		do{
			elm=elm.parentNode;
		} while(elm.nodeName.toLowerCase()!=domtab.contentElements)
		elm.style.display=state==0?'none':'block';
	},
	showTab:function(e){
		var o=domtab.getTarget(e);
		if(o.parentNode.parentNode.currentSection!=''){
			domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);
			domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass);
		}
		var id=o.href.match(/#(w.+)/)[1];
		o.parentNode.parentNode.currentSection=id;
		o.parentNode.parentNode.currentLink=o;
		domtab.cssjs('add',o.parentNode,domtab.activeClass);
		domtab.changeTab(document.getElementById(id),1);
		document.getElementById(id).focus();
		domtab.cancelClick(e);
	},
/* helper methods */
	getTarget:function(e){
		var target = window.event ? window.event.srcElement : e ? e.target : null;
		if (!target){return false;}
		if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;}
		return target;
	},
	cancelClick:function(e){
		if (window.event){
			window.event.cancelBubble = true;
			window.event.returnValue = false;
			return;
		}
		if (e){
			e.stopPropagation();
			e.preventDefault();
		}
	},
	addEvent: function(elm, evType, fn, useCapture){
		if (elm.addEventListener) 
		{
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (elm.attachEvent) {
			var r = elm.attachEvent('on' + evType, fn);
			return r;
		} else {
			elm['on' + evType] = fn;
		}
	},
	cssjs:function(a,o,c1,c2){
		switch (a){
			case 'swap':
				o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
			break;
			case 'add':
				if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
			break;
			case 'remove':
				var rep=o.className.match(' '+c1)?' '+c1:c1;
				o.className=o.className.replace(rep,'');
			break;
			case 'check':
				var found=false;
				var temparray=o.className.split(' ');
				for(var i=0;i<temparray.length;i++){
					if(temparray[i]==c1){found=true;}
				}
				return found;
			break;
		}
	}
}
domtab.addEvent(window, 'load', domtab.init, false);

示例代码:

 
<style type="text/css">
<!--
body {
	margin:0;
	padding:10px 5px;
	font-size:12px;
	font-family:verdana,arial,sans-serif,"宋体";
}
#warp {
	width:600px;
	margin:0 auto;
}
 
/* TAB样式 开始 */
ul.domtabs {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px solid #D55E12;
	margin: 0 0 20px 0;
	padding: 0 30px 2px 0;
	text-align: right;
}
ul.domtabs li {
	display: inline;
	margin: 0;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover {
	text-decoration: none;
	padding: 2px 5px 4px 5px;
	position: relative;
	bottom: 2px;
	color: #EA8544;
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover {
	background:#fff;
	padding: 2px 10px 4px 10px;
	border: 1px solid #D55E12;
	border-bottom: 1px solid #fff;
	position: relative;
	bottom: 2px;
	color: #D55E12;
	font-weight:bold;
}
ul.domtabs a:hover {
	text-decoration: underline;
	color: #D55E12;
}
ul.domtabs li.active a:hover {
	text-decoration: none;
}
 
/* 前后跳转 */
ul.prevnext {
	list-style-type: none;
	margin: 0;
	padding: .5em 0;
	border-top: 1px solid #D55E12;
}
 
ul.prevnext li a {
	display: block;
	width: 6em;
	color: #FFF;
	background-color: #D55E12;
	padding: 2px 0;
	text-align: center;
	text-decoration: none;
	font:12px bold "verdana";
}
 
ul.prevnext li a:hover {
	color: #FFF;
	background-color: #EA8544;
}
 
ul.prevnext .prev { float: left; }
ul.prevnext .next { float: right; }
 
h2.title {color:#D55E12;}
-->
</style>
 
<script type="text/javascript" src="js/domtab.js"></script>
 
<div id="warp">
 
	<div class="domtab doprevnext">
 
		<ul class="domtabs">
			<li><a href="#tab1">PHP/MySQL</a></li>
			<li><a href="#tab2">(X)HTML/CSS</a></li>
			<li><a href="#tab3">Javascript</a></li>
			<li><a href="#tab4">Ajax</a></li>
		</ul>
 
		<h2 class="title">Codebit.cn - 聚合小段精华代码</h2>
 
		<!-- TAB 1 -->
		<div>
 
			<h2><a name="tab1" id="tab1">PHP</a></h2>
			<p>PHP(“PHP: Hypertext Preprocessor”,超文本预处理器的字母缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web 开发。 </p>
 
			<h2><a name="mysql">MySQL</a></h2>
			<p>MySQL是最流行的开放源码SQL数据库管理系统,它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司,结合了开放源码价值取向、方法和成功的商业模型。</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
		<!-- TAB 2 -->
		<div>
 
			<h2><a name="tab2" id="tab2">(X)HTML</a></h2>
			<p>HTML语言是我们建立网页的工具,从它出现发展到现在,规范不断完善,功能越来越强。但是依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上日新月异的应用需求。2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。</p>
 
			<p>XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。</p>
 
			<h2><a name="css">CSS</a></h2>
			<p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
		<!-- TAB 3 -->
		<div>
 
			<h2><a name="tab3" id="tab3">Javascript</a></h2>
			<p>JavaScript 是一种新的描述语言,此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如: form 的输入) 而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端 (server)处理,再传回来的过程,而直接可以被客户端 (client) 的应用程式所处理。</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
		<!-- TAB 4 -->
		<div>
 
			<h2><a name="tab4" id="tab4">Ajax</a></h2>
			<p>AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及  Google Maps 出现后才一举成名天下知。</p>
 
			<p>这两个 JavaScript 功能 是:
				<ul>
					<li>在不重新读取页面的情况下对伺服器送出要求(request)</li>
					<li>解析、使用 XML 文件</li>
				</ul>
			</p>
 
			<p><a href="#top">back to menu</a></p>
 
		</div>
 
	</div>
 
</div>

DOMTab 的页面样式完全由 css 控制,你可以通过在样式为 domtab 的 DIV 上添加一个 doprevnext 样式来生成前后跳转链接:

 
<ul class="prevnext">
	<li class="prev"><a href="#">previous</a></li>
	<li class="next"><a href="#">next</a></li>
</ul>

官方网站:
http://onlinetools.org/tools/domtabdata/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>