Home Html Making Tab using Javascript
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Making Tab using Javascript

Advertisement
This Example describes the way to make Tab using javascript and css.For this we are going to make program named domtab.css, domtab.js, index.html.

Making Tab using Javascript

     

This Example describes the way to make Tab using javascript and css.For this we are going to make program named  domtab.css, domtab.js, index.html. The code involved in programs are described below:-

 

 

 

 

 

 

index.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
  <title>Example of making Ajax tab</title>
  <style type="text/css">
  @import "domtab.css";
  </style>

  <script type="text/javascript" src="domtab.js"></script>
  <script type="text/javascript">
  document.write('<style type="text/css">');  
  document.write('div.domtab div{display:none;}<');
  document.write('/s'+'tyle>');  
  </script>
</head>
<body>
<h1><a name="top" id="top">Ajax-Tab Example</a></h1>
<p id="domtabprintview"></p>
<div class="domtab">
  <ul class="domtabs">
  <li><a href="#what">What is DOMtab?</a></li>
  <li><a href="#how">How to use DOMtab</a></li>
  <li><a href="#pr">Previous and next links</a></li>
  <li><a href="#style">How to style DOMtab</a></li>
  </ul>
  <div>
  <h2><a name="what" id="what">What is Dom Tab</a></h2>
  <p>DOMtab is a JavaScript that turns a list of links connected
    to content
sections into a tab interface.The script removes  any "back to top" links in the section and automatically hides all 
   but the first one when the 
page is loaded.</p>
  </div>
  <div>
  <h2><a name="how" id="how">How to use DOMtab</a></h2>
  <p>Applying DOMtab to your pages is easy, all you need is 
  to call the 
script in the head of the document:</p>
  </div>
  <div>
  <h2><a name="pr" id="pr">Previous and next links</a></h2>
  <p>In this version I added the option to have previous and 
   next links 


<p>DOMtab then generates the
 following link list in each of the sections, automatically 

removing the previous link in the first and the next in the 
   last section:</p>

</pre>
<p>Both labels are set via innerHTML rather than the proper 
  method :-).
 This allows you to
use images if wanted:</p>
  </div>
  <div>
  <h2><a name="style" id="style">How to style DOMtab</a></h2>
  <p>Using the mandatory classes domtab for the main DIV of
    each menu,and domtabs for the menu list,you can pretty

    much style your menus any way you want to.</p>
  </pre>
  </div>
  </body>
</html>

domtab.css
*{
  margin:0;
  padding:0;
  list-style:none;
  border:none;
  }
  ul.domtabs li{
  float:left;
  padding:0 .5em 0 0;
  }
  ul.domtabs a:link,
  ul.domtabs a:visited,
  ul.domtabs a:active,
  ul.domtabs a:hover{
  width:8em;
  padding:.2em 1em;
  display:block;
  background:#FF33CC;
  color:#fff;
  height:3em;
  text-decoration:none;
  }
  div.domtab div{
  clear:both;
  width:35.5em;
  background:#000033;
  color:#fff;
  padding:1em 3em;
  }
  h1{
  padding:1em 2;
  background:#fff;
  }

domtab.js
domtab={
  tabClass:'domtab',
  listClass:'domtabs',
  contentElements:'div',
  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;}
  newlink.appendChild(document.createTextNode(domtab.
  showAllLinkText));

  document.getElementById(domtab.printID).appendChild(newlink);
  }
  },
  
  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;}
  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);
  }
  },
  
  
  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);
  },

  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;
  },
  
  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);


Output of the program:-


Download Source Code

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 29, 2008

Ask Questions?    Discuss: Making Tab using Javascript   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Prayag
June 25, 2011
Really good example

Really a nice example. Nothing less so that I dont get knowledge and nothing more so that I get bogged down. Regards, Prayag
ehsan
August 16, 2011
tanx

Tanx, Its very good
javed salmani
April 6, 2012
html

discribe brief of HTML FRAME, and using HTML images tags
DMCA.com