低一度

顶部横幅

Js标签页浏览控件推介：DOMTab

2010-8-26 - diyidu - 网页设计 - Views

假如你问我：如何在越来越显得狭小的页面空间上容纳展示更多的内容？我会毫不犹豫告诉你——借助标签页（TAB）技术，TAB的优点就在于它允许在同一个地方显示多个不同的项目或内容。眼下，标签页有许多种不同的制作方法，本文介绍的是 Christian Heilmann 写的 DOMTab。希望能给大家提供思路和借鉴！

OK，先看代码示例：点击这儿查看

实例代码如下——

<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 #008000;
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: 1px;
color: #008000;
}
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 #008000;
border-bottom: 1px solid #fff;
position: relative;
bottom: 1px;
color: #008000;
font-weight:bold;
}
ul.domtabs a:hover {
text-decoration: underline;
color: #008000;
}
ul.domtabs li.active a:hover {
text-decoration: none;
}
/* 前后跳转 */
ul.prevnext {
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid #008000;
}
ul.prevnext li a {
display: block;
width: 6em;
color: #FFF;
background-color: #008000;
padding: 2px 0;
text-align: center;
text-decoration: none;
font:12px bold "verdana";
}
ul.prevnext li a:hover {
color: #FFF;
background-color: #008000;
}
ul.prevnext .prev { float: left; }
ul.prevnext .next { float: right; }
h2.title {color:#008000;}
-->
</style>
<script type="text/javascript">
/*
DOMtab Version 3.1415927
Updated March the First 2006
written by Christian Heilmann
*/
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:'上一项', // HTML content of the prev link
nextLabel:'下一项', // 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);
</script>
<div id="warp">
<div class="domtab doprevnext">
<ul class="domtabs">
<li><a href="#tab1">菜单一</a></li>
<li><a href="#tab2">菜单二</a></li>
<li><a href="#tab3">菜单三</a></li>
<li><a href="#tab4">菜单四</a></li>
</ul>
<h3>代码整理：<a href="http://www.diyidu.cn">低一度博客</a></h3>
<!-- TAB 1 -->
<div>
<h2><a name="tab1" id="tab1">菜单一</a></h2>
<p>内容或列表一</p>
<p><a href="#top">back to menu</a></p>
</div>
<!-- TAB 2 -->
<div>
<h2><a name="tab2" id="tab2">菜单二</a></h2>
<p>内容或列表二</p>
<p><a href="#top">back to menu</a></p>
</div>
<!-- TAB 3 -->
<div>
<h2><a name="tab3" id="tab3">菜单三</a></h2>
<p>内容或列表三</p>
<p><a href="#top">back to menu</a></p>
</div>
<!-- TAB 4 -->
<div>
<h2><a name="tab4" id="tab4">菜单四</a></h2>
<p>内容或列表四</p>
<p><a href="#top">back to menu</a></p>
</div>
</div>
</div>

关键词 // Tab 效果演示 代码分享 JavaScript JS实例
出处：低一度，链接：http://www.diyidu.cn/post/domtab_dyd.html

上一篇：再扒3张老外的靓皮for Z-Blog 下一篇：有效提高Adsense收入的几条建议

随机推荐

to "Js标签页浏览控件推介：DOMTab"

  • 晓潘
    #1 晓潘 回复该留言 2010-8-26 15:15:25
    每次都是沙发，呵呵。
    爱好者博客 于 2010-8-26 16:19:48 回复
    你好意思嘛，也不给我留下一个。
    晓潘 于 2010-8-26 16:26:01 回复
    周哥，你也太晚了点吧？我是15：15，你是16：19，整整差一个小时！
    飞猪 于 2010-8-26 20:55:41 回复
    沙发后面占个位。
  • wufun
    #3 wufun 回复该留言 2010-8-26 15:46:42
    呵呵，博主的文章非常好啊，欢迎回访，以后会常来看看的！
  • 任鸟飞
    #5 任鸟飞 回复该留言 2010-8-26 15:49:14
    现在都采用jquery了，代码相对来说简单很多，我博客边栏就是采用jquery来实现tab功能的。
    桶哥 于 2010-8-26 15:51:17 回复
    恩，在lookfordesign.com看过这个。
  • 痕迹
    #10 痕迹 回复该留言 2010-8-27 2:10:18
    及时雨啊，最近学CSS，正是要实现这个效果，但是不知道叫什么，所以搜不到教程。
    桶哥 于 2010-8-27 14:29:34 回复
    是吗？希望能派上用场。
  • 集趣
    #15 集趣 回复该留言 2010-8-27 13:50:16
    JS不太懂，这个页面出现了英文广告，我点了，不知道单价如何？
    桶哥 于 2010-8-27 14:29:04 回复
    一般般，7美分。
  • 记忆之家
    #17 记忆之家 回复该留言 2010-8-27 14:25:19
    好像代码不少，能否精简一下呢？我认为可以。
    桶哥 于 2010-8-27 14:28:28 回复
    你没看到我都写在一起吗？其实CSS和JS以及DIV可以分开写的，这样你就不觉得代码多了。
  • 人好哇
    #19 人好哇 回复该留言 2010-8-27 16:40:45
    全部代码整合在一个文件里有好处也有坏处。总之这个东西还是很不错的，收下了。
  • 陈剑
    #25 陈剑 回复该留言 2010-8-28 14:31:51
    你的演示才几个文字，但是代码却用了这么多，真把网页做好之后会不会太大？
    桶哥 于 2010-8-28 14:57:47 回复
    您这个担忧有些多余哦。
  • 记忆之家
    #26 记忆之家 回复该留言 2010-8-28 14:52:18
    话说关键是看JS的脚本，
    哈哈，还是些英文广告，不知道单价怎么样？
    希望度哥能告诉我们啊！
    桶哥 于 2010-8-28 14:57:18 回复
    一次大约0.5刀吧。
  • 请教个问题
    #29 请教个问题 回复该留言 2011-8-18 14:30:47
    博主，你好
    我用domtab做自己的主页，当嵌套表格的时候出现了问题，请看下面的代码，并由其关注Tab2的执行效果
    <!-- TAB 2 -->
    <div>
    <h2><a name="tab2" id="tab2">个人简历</a></h2>
    <table border="0" align="left">
    <tr>
    <td width="150px"> 2011.07-Now </td>
    <td>xxxx</td>
    </tr>
    <tr>
    <td width="150px"> 2007.09-2011.07</td>
    <td>xxxx</td>
    </tr>
    <tr>
    <td width="150px"> 2007.05-2007.08</td>
    <td>xxxx</td>
    </tr>
    <tr>
    <td width="150px"> 2004.09-2007.03</td>
    <td>xxxx</td>
    </tr>
    </table>
    <p><a href="#top">back to menu</a></p>
    </div>
    不知能否麻烦看下是什么地方出问题了？

Add comment

验证码