用户操作
[留言]  [发消息]  [加为好友] 
订阅我的博客
XML聚合    FeedSky
订阅到鲜果
订阅到Google
订阅到抓虾
xl5550的公告
文章分类
存档

转载  Javascript 标签页（TAB）浏览控件推介之：DOMTab 收藏

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


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript: 
  1.  
  2. /* 
  3.     DOMtab Version 3.1415927 
  4.     Updated March the First 2006 
  5.     written by Christian Heilmann 
  6.     check blog for updates: http://www.wait-till-i.com     
  7.     free to use, not free to resell 
  8. */ 
  9.  
  10. domtab={ 
  11.     tabClass:'domtab', // class to trigger tabbing 
  12.     listClass:'domtabs', // class of the menus 
  13.     activeClass:'active', // class of current link 
  14.     contentElements:'div', // elements to loop through 
  15.     backToLinks:/#top/, // pattern to check "back to top" links 
  16.     printID:'domtabprintview', // id of the print all link 
  17.     showAllLinkText:'show all content', // text for the print all link 
  18.     prevNextIndicator:'doprevnext', // class to trigger prev and next links 
  19.     prevNextClass:'prevnext', // class of the prev and next list 
  20.     prevLabel:'previous', // HTML content of the prev link 
  21.     nextLabel:'next', // HTML content of the next link 
  22.     prevClass:'prev', // class for the prev link 
  23.     nextClass:'next', // class for the next link 
  24.     init:function(){ 
  25.         var temp; 
  26.         if(!document.getElementById || !document.createTextNode){return;} 
  27.         var tempelm=document.getElementsByTagName('div');         
  28.         for(var i=0;i<tempelm.length;i++){ 
  29.             if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} 
  30.             domtab.initTabMenu(tempelm[i]); 
  31.             domtab.removeBackLinks(tempelm[i]); 
  32.             if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){ 
  33.                 domtab.addPrevNext(tempelm[i]); 
  34.             } 
  35.             domtab.checkURL(); 
  36.         } 
  37.         if(document.getElementById(domtab.printID)  
  38.            && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){ 
  39.             var newlink=document.createElement('a'); 
  40.             newlink.setAttribute('href','#'); 
  41.             domtab.addEvent(newlink,'click',domtab.showAll,false); 
  42.             newlink.onclick=function(){return false;} // safari hack 
  43.             newlink.appendChild(document.createTextNode(domtab.showAllLinkText)); 
  44.             document.getElementById(domtab.printID).appendChild(newlink); 
  45.         } 
  46.     }, 
  47.     checkURL:function(){ 
  48.         var id; 
  49.         var loc=window.location.toString(); 
  50.         loc=/#/.test(loc)?loc.match(/#(\w.+)/)[1]:''; 
  51.         if(loc==''){return;} 
  52.         var elm=document.getElementById(loc); 
  53.         if(!elm){return;} 
  54.         var parentMenu=elm.parentNode.parentNode.parentNode; 
  55.         parentMenu.currentSection=loc; 
  56.         parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none'; 
  57.         domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass); 
  58.         var links=parentMenu.getElementsByTagName('a'); 
  59.         for(i=0;i<links.length;i++){ 
  60.             if(!links[i].getAttribute('href')){continue;} 
  61.             if(!/#/.test(links[i].getAttribute('href').toString())){continue;} 
  62.             id=links[i].href.match(/#(\w.+)/)[1]; 
  63.             if(id==loc){ 
  64.                 var cur=links[i].parentNode.parentNode; 
  65.                 domtab.cssjs('add',links[i].parentNode,domtab.activeClass); 
  66.                 break; 
  67.             } 
  68.         } 
  69.         domtab.changeTab(elm,1); 
  70.         elm.focus(); 
  71.         cur.currentLink=links[i]; 
  72.         cur.currentSection=loc; 
  73.     }, 
  74.     showAll:function(e){ 
  75.         document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID)); 
  76.         var tempelm=document.getElementsByTagName('div');         
  77.         for(var i=0;i<tempelm.length;i++){ 
  78.             if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} 
  79.             var sec=tempelm[i].getElementsByTagName(domtab.contentElements); 
  80.             for(var j=0;j<sec.length;j++){ 
  81.                 sec[j].style.display='block'; 
  82.             } 
  83.         } 
  84.         var tempelm=document.getElementsByTagName('ul');         
  85.         for(i=0;i<tempelm.length;i++){ 
  86.             if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;} 
  87.             tempelm[i].parentNode.removeChild(tempelm[i]); 
  88.             i--; 
  89.         } 
  90.         domtab.cancelClick(e); 
  91.     }, 
  92.     addPrevNext:function(menu){ 
  93.         var temp; 
  94.         var sections=menu.getElementsByTagName(domtab.contentElements); 
  95.         for(var i=0;i<sections.length;i++){ 
  96.             temp=domtab.createPrevNext(); 
  97.             if(i==0){ 
  98.                 temp.removeChild(temp.getElementsByTagName('li')[0]); 
  99.             } 
  100.             if(i==sections.length-1){ 
  101.                 temp.removeChild(temp.getElementsByTagName('li')[1]); 
  102.             } 
  103.             temp.i=i; // h4xx0r! 
  104.             temp.menu=menu; 
  105.             sections[i].appendChild(temp); 
  106.         } 
  107.     }, 
  108.     removeBackLinks:function(menu){ 
  109.         var links=menu.getElementsByTagName('a'); 
  110.         for(var i=0;i<links.length;i++){ 
  111.             if(!domtab.backToLinks.test(links[i].href)){continue;} 
  112.             links[i].parentNode.removeChild(links[i]); 
  113.             i--; 
  114.         } 
  115.     }, 
  116.     initTabMenu:function(menu){ 
  117.         var id; 
  118.         var lists=menu.getElementsByTagName('ul'); 
  119.         for(var i=0;i<lists.length;i++){ 
  120.             if(domtab.cssjs('check',lists[i],domtab.listClass)){ 
  121.                 var thismenu=lists[i]; 
  122.                 break; 
  123.             } 
  124.         } 
  125.         if(!thismenu){return;} 
  126.         thismenu.currentSection=''; 
  127.         thismenu.currentLink=''; 
  128.         var links=thismenu.getElementsByTagName('a'); 
  129.         for(i=0;i<links.length;i++){ 
  130.             if(!/#/.test(links[i].getAttribute('href').toString())){continue;} 
  131.             id=links[i].href.match(/#(\w.+)/)[1]; 
  132.             if(document.getElementById(id)){ 
  133.                 domtab.addEvent(links[i],'click',domtab.showTab,false); 
  134.                 links[i].onclick=function(){return false;} // safari hack 
  135.                 domtab.changeTab(document.getElementById(id),0); 
  136.             } 
  137.         } 
  138.         id=links[0].href.match(/#(\w.+)/)[1]; 
  139.         if(document.getElementById(id)){ 
  140.             domtab.changeTab(document.getElementById(id),1); 
  141.             thismenu.currentSection=id; 
  142.             thismenu.currentLink=links[0]; 
  143.             domtab.cssjs('add',links[0].parentNode,domtab.activeClass); 
  144.         } 
  145.     }, 
  146.     createPrevNext:function(){ 
  147.         // this would be so much easier with innerHTML, darn you standards fetish! 
  148.         var temp=document.createElement('ul'); 
  149.         temp.className=domtab.prevNextClass; 
  150.         temp.appendChild(document.createElement('li')); 
  151.         temp.getElementsByTagName('li')[0].appendChild(document.createElement('a')); 
  152.         temp.getElementsByTagName('a')[0].setAttribute('href','#'); 
  153.         temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel; 
  154.         temp.getElementsByTagName('li')[0].className=domtab.prevClass; 
  155.         temp.appendChild(document.createElement('li')); 
  156.         temp.getElementsByTagName('li')[1].appendChild(document.createElement('a')); 
  157.         temp.getElementsByTagName('a')[1].setAttribute('href','#'); 
  158.         temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel; 
  159.         temp.getElementsByTagName('li')[1].className=domtab.nextClass; 
  160.         domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false); 
  161.         domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false); 
  162.         // safari fix 
  163.         temp.getElementsByTagName('a')[0].onclick=function(){return false;} 
  164.         temp.getElementsByTagName('a')[1].onclick=function(){return false;} 
  165.         return temp; 
  166.     }, 
  167.     navTabs:function(e){ 
  168.         var li=domtab.getTarget(e); 
  169.         var menu=li.parentNode.parentNode.menu; 
  170.         var count=li.parentNode.parentNode.i; 
  171.         var section=menu.getElementsByTagName(domtab.contentElements); 
  172.         var links=menu.getElementsByTagName('a'); 
  173.         var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1; 
  174.         section[count].style.display='none'; 
  175.         domtab.cssjs('remove',links[count].parentNode,domtab.activeClass); 
  176.         section[othercount].style.display='block'; 
  177.         domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass); 
  178.         var parent=links[count].parentNode.parentNode; 
  179.         parent.currentLink=links[othercount]; 
  180.         parent.currentSection=links[othercount].href.match(/#(\w.+)/)[1]; 
  181.         domtab.cancelClick(e); 
  182.     }, 
  183.     changeTab:function(elm,state){ 
  184.         do{ 
  185.             elm=elm.parentNode; 
  186.         } while(elm.nodeName.toLowerCase()!=domtab.contentElements) 
  187.         elm.style.display=state==0?'none':'block'; 
  188.     }, 
  189.     showTab:function(e){ 
  190.         var o=domtab.getTarget(e); 
  191.         if(o.parentNode.parentNode.currentSection!=''){ 
  192.             domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0); 
  193.             domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass); 
  194.         } 
  195.         var id=o.href.match(/#(\w.+)/)[1]; 
  196.         o.parentNode.parentNode.currentSection=id; 
  197.         o.parentNode.parentNode.currentLink=o; 
  198.         domtab.cssjs('add',o.parentNode,domtab.activeClass); 
  199.         domtab.changeTab(document.getElementById(id),1); 
  200.         document.getElementById(id).focus(); 
  201.         domtab.cancelClick(e); 
  202.     }, 
  203. /* helper methods */ 
  204.     getTarget:function(e){ 
  205.         var target = window.event ? window.event.srcElement : e ? e.target : null; 
  206.         if (!target){return false;} 
  207.         if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;} 
  208.         return target; 
  209.     }, 
  210.     cancelClick:function(e){ 
  211.         if (window.event){ 
  212.             window.event.cancelBubble = true; 
  213.             window.event.returnValue = false; 
  214.             return; 
  215.         } 
  216.         if (e){ 
  217.             e.stopPropagation(); 
  218.             e.preventDefault(); 
  219.         } 
  220.     }, 
  221.     addEvent: function(elm, evType, fn, useCapture){ 
  222.         if (elm.addEventListener)  
  223.         { 
  224.             elm.addEventListener(evType, fn, useCapture); 
  225.             return true; 
  226.         } else if (elm.attachEvent) { 
  227.             var r = elm.attachEvent('on' + evType, fn); 
  228.             return r; 
  229.         } else { 
  230.             elm['on' + evType] = fn; 
  231.         } 
  232.     }, 
  233.     cssjs:function(a,o,c1,c2){ 
  234.         switch (a){ 
  235.             case 'swap': 
  236.                 o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2); 
  237.             break; 
  238.             case 'add': 
  239.                 if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;} 
  240.             break; 
  241.             case 'remove': 
  242.                 var rep=o.className.match(' '+c1)?' '+c1:c1; 
  243.                 o.className=o.className.replace(rep,''); 
  244.             break; 
  245.             case 'check': 
  246.                 var found=false; 
  247.                 var temparray=o.className.split(' '); 
  248.                 for(var i=0;i<temparray.length;i++){ 
  249.                     if(temparray[i]==c1){found=true;} 
  250.                 } 
  251.                 return found; 
  252.             break; 
  253.         } 
  254.     } 
  255. } 
  256. domtab.addEvent(window, 'load', domtab.init, false); 
  257.  



示例代码：
HTML: 
  1.  
  2. <style type="text/css"> 
  3. <!--  
  4. body { 
  5.     margin:0; 
  6.     padding:10px 5px; 
  7.     font-size:12px; 
  8.     font-family:verdana,arial,sans-serif,"宋体"; 
  9. } 
  10. #warp { 
  11.     width:600px; 
  12.     margin:0 auto; 
  13. } 
  14.  
  15. /* TAB样式 开始 */ 
  16. ul.domtabs { 
  17.     list-style: none; 
  18.     font-size: 0.9em; 
  19.     border-bottom: 1px solid #D55E12; 
  20.     margin: 0 0 20px 0; 
  21.     padding: 0 30px 2px 0; 
  22.     text-align: right; 
  23. } 
  24. ul.domtabs li { 
  25.     display: inline; 
  26.     margin: 0; 
  27. } 
  28. ul.domtabs a:link, 
  29. ul.domtabs a:visited, 
  30. ul.domtabs a:active, 
  31. ul.domtabs a:hover { 
  32.     text-decoration: none; 
  33.     padding: 2px 5px 4px 5px; 
  34.     position: relative; 
  35.     bottom: 2px; 
  36.     color: #EA8544; 
  37. } 
  38. ul.domtabs li.active a:link, 
  39. ul.domtabs li.active a:visited, 
  40. ul.domtabs li.active a:active, 
  41. ul.domtabs li.active a:hover { 
  42.     background:#fff; 
  43.     padding: 2px 10px 4px 10px; 
  44.     border: 1px solid #D55E12; 
  45.     border-bottom: 1px solid #fff; 
  46.     position: relative; 
  47.     bottom: 2px; 
  48.     color: #D55E12; 
  49.     font-weight:bold; 
  50. } 
  51. ul.domtabs a:hover { 
  52.     text-decoration: underline; 
  53.     color: #D55E12; 
  54. } 
  55. ul.domtabs li.active a:hover { 
  56.     text-decoration: none; 
  57. } 
  58.  
  59. /* 前后跳转 */ 
  60. ul.prevnext { 
  61.     list-style-type: none; 
  62.     margin: 0; 
  63.     padding: .5em 0; 
  64.     border-top: 1px solid #D55E12; 
  65. } 
  66.  
  67. ul.prevnext li a { 
  68.     display: block; 
  69.     width: 6em; 
  70.     color: #FFF; 
  71.     background-color: #D55E12; 
  72.     padding: 2px 0; 
  73.     text-align: center; 
  74.     text-decoration: none; 
  75.     font:12px bold "verdana"; 
  76. } 
  77.  
  78. ul.prevnext li a:hover { 
  79.     color: #FFF; 
  80.     background-color: #EA8544; 
  81. } 
  82.  
  83. ul.prevnext .prev { float: left; } 
  84. ul.prevnext .next { float: right; } 
  85.  
  86. h2.title {color:#D55E12;} 
  87. -->
  88. </style> 
  89.  
  90. <script type="text/javascript" src="js/domtab.js"></script> 
  91.  
  92. <div id="warp"> 
  93.  
  94.     <div class="domtab doprevnext"> 
  95.  
  96.         <ul class="domtabs"> 
  97.             <li><a href="#tab1">PHP/MySQL</a></li> 
  98.             <li><a href="#tab2">(X)HTML/CSS</a></li> 
  99.             <li><a href="#tab3">Javascript</a></li> 
  100.             <li><a href="#tab4">Ajax</a></li> 
  101.         </ul> 
  102.  
  103.         <h2 class="title">Codebit.cn - 聚合小段精华代码</h2> 
  104.  
  105.         <!-- TAB 1 --> 
  106.         <div> 
  107.  
  108.             <h2><a name="tab1" id="tab1">PHP</a></h2> 
  109.             <p>PHP（“PHP: Hypertext Preprocessor”，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。 </p> 
  110.  
  111.             <h2><a name="mysql">MySQL</a></h2> 
  112.             <p>MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功的商业模型。</p> 
  113.  
  114.             <p><a href="#top">back to menu</a></p> 
  115.  
  116.         </div> 
  117.  
  118.         <!-- TAB 2 --> 
  119.         <div> 
  120.  
  121.             <h2><a name="tab2" id="tab2">(X)HTML</a></h2> 
  122.             <p>HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。</p> 
  123.  
  124.             <p>XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。</p> 
  125.  
  126.             <h2><a name="css">CSS</a></h2> 
  127.             <p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p> 
  128.  
  129.             <p><a href="#top">back to menu</a></p> 
  130.  
  131.         </div> 
  132.  
  133.         <!-- TAB 3 --> 
  134.         <div> 
  135.  
  136.             <h2><a name="tab3" id="tab3">Javascript</a></h2> 
  137.             <p>JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。</p> 
  138.  
  139.             <p><a href="#top">back to menu</a></p> 
  140.  
  141.         </div> 
  142.  
  143.         <!-- TAB 4 --> 
  144.         <div> 
  145.  
  146.             <h2><a name="tab4" id="tab4">Ajax</a></h2> 
  147.             <p>AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及  Google Maps 出现后才一举成名天下知。</p> 
  148.  
  149.             <p>这两个 JavaScript 功能 是： 
  150.                 <ul> 
  151.                     <li>在不重新读取页面的情况下对伺服器送出要求（request）</li> 
  152.                     <li>解析、使用 XML 文件</li> 
  153.                 </ul> 
  154.             </p> 
  155.  
  156.             <p><a href="#top">back to menu</a></p> 
  157.  
  158.         </div> 
  159.  
  160.     </div> 
  161.  
  162. </div> 
  163.  



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

HTML: 
  1.  
  2. <ul class="prevnext"> 
  3.     <li class="prev"><a href="#">previous</a></li> 
  4.     <li class="next"><a href="#">next</a></li> 
  5. </ul> 
  6.  


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

发表于 @ 2007年08月07日　08:54:00 | 评论( loading... ) | 编辑| 举报| 收藏

旧一篇:优秀的界面设计是如何诞生的
查看最新精华文章 请访问博客首页相关文章
  • 发表评论
  • 评论内容：
  •  
Copyright © xl5550
Powered by CSDN Blog