Tab control : Tab « GUI Components « JavaScript DHTML

Tab control


Mastering JavaScript, Premium Edition
by James Jaworski 

Publisher Sybex CopyRight 2001

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Tabbed Panel</title>
   <style rel="stylesheet" type="text/css">
   .tab {font-family: sans-serif; line-height:150%;
   font-weight: bold; position:absolute;
   text-align: center; border: 2px; border-color:#999999;
   border-style: outset; border-bottom-style: none;
   height: 54px; width: 90px; margin:0px}
.panel {font-family: sans-serif; font-size: smaller;
   position:absolute; border: 2px; border-color:#999999;
   border-style:outset; width: 400px; height: 200px;
   left:0px; top:54px; margin:0px; padding:6px}
h1 {text-align: center}
   <script language="JavaScript">
var panelID = "p1"
var numDiv = 8
var numRows = 2
var tabsPerRow = 4
var numLocations = numRows * tabsPerRow
var tabWidth = 90
var tabHeight = 30
var vOffset = 6
var hOffset = 10</script>
<script language="JavaScript"  >
var divLocation = new Array(numLocations)
var newLocation = new Array(numLocations)
for(var i=0; i<numLocations; ++i) {
 divLocation[i] = i
 newLocation[i] = i
function getDiv(s,i) {
 var div
 if(navigator.appName == "Microsoft Internet Explorer"
   && navigator.appVersion.charAt(0) < 5)
  div = document.all.item(panelID+s+i)
 else div = document.getElementById(panelID+s+i)
 return div
function setZIndex(div, zIndex) { = zIndex
function getLocation(i) {
 return divLocation[i]
function setLocation(i, j) {
 divLocation[i] = j
function getNewLocation(i) {
 return newLocation[i]
function setNewLocation(i, j) {
 newLocation[i] = j
function updatePosition(div, newPos) { = (numRows-(Math.floor(newPos/tabsPerRow) + 1)) * (tabHeight-
   vOffset) = (newPos % tabsPerRow) * tabWidth +
  (hOffset * (Math.floor(newPos / tabsPerRow)))
function selectTab(n) {
 // n is the ID of the division that was clicked
 // firstTab is the location of the first tab in the selected row
 var firstTab = Math.floor(getLocation(n) / tabsPerRow) * tabsPerRow
 // newLoc is its new location
 for(var i=0; i<numDiv; ++i) {
   // loc is the current location of the tab
   var loc = getLocation(i)
   // If in the selected row
   if(loc >= firstTab && loc < (firstTab + tabsPerRow)) setNewLocation(i, loc - 
   else if(loc < tabsPerRow) setNewLocation(i,firstTab+(loc % tabsPerRow))
   else setNewLocation(i, loc)
 // Set tab positions & zIndex
 // Update location
 for(var i=0; i<numDiv; ++i) {
  var div = getDiv("tab",i)
  var loc = getNewLocation(i)
  updatePosition(div, loc)
  if(i == n) setZIndex(div, numLocations +1)
  else setZIndex(div,numLocations - loc)
  div = getDiv("panel",i)
  if(i == n) setZIndex(div, numLocations +1)
  else setZIndex(div, numLocations - loc)
  setLocation(i, loc)

</head><body><h1>Tabbed Panel</h1><div 
   style="background-color: transparent; position: relative; width: 400px; 
   height: 200px"><div class="tab" style="font-weight: bold; background-color: 
   yellow; left: 0px; top: 24px; z-index: 8" id="p1tab0" 
   onclick="selectTab(0)">HTML</div><div class="tab" style="font-weight: bold; 
   background-color: orange; left: 90px; top: 24px; z-index: 7" id="p1tab1" 
   onclick="selectTab(1)">XHTML</div><div class="tab" style="font-weight: bold; 
   background-color: red; left: 180px; top: 24px; z-index: 6" id="p1tab2" 
   onclick="selectTab(2)">CSS</div><div class="tab" style="font-weight: bold; 
   background-color: cyan; left: 270px; top: 24px; z-index: 5" id="p1tab3" 
   onclick="selectTab(3)">DOM</div><div class="tab" style="font-weight: bold; 
   background-color: rgb(170,170,255); left: 10px; top: 0px; z-index: 4" 
   id="p1tab4" onclick="selectTab(4)">JavaScript</div><div class="tab" 
   style="font-weight: bold; background-color: fuchsia; left: 100px; top: 0px; 
   z-index: 3" id="p1tab5" onclick="selectTab(5)">DHTML</div><div class="tab" 
   style="font-weight: bold; background-color: lime; left: 190px; top: 0px; z-
   index: 2" id="p1tab6" onclick="selectTab(6)">XML</div><div class="tab" 
   style="font-weight: bold; background-color: silver; left: 280px; top: 0px; z-
   index: 1" id="p1tab7" onclick="selectTab(7)">XSLT</div><div class="panel" 
   style="background-color: yellow;  z-index: 8" id="p1panel0">
<h2>Hypertext Markup Language</h2>
<p><a href="" target="external">HTML</a> is the 
   language in which Web pages are written. HTML uses tags like &lt;p&gt; and 
   &lt;/p&gt; to identify how text is to be structured and formatted within a 
   document. </p>
</div><div class="panel" style="background-color: orange;  z-index: 7" 
<h2>Extensible HyperText Markup Language</h2>
<p><a href="" target="external">XHTML</a> is a 
   redevelopment and extension of HTML that makes HTML compatible with XML. 
   XHTML specifies a family of markup languages that are based on HTML but take 
   advantage of the simplicity, extensibility, and powerful toolset of XML. </p>
</div><div class="panel" style="background-color: red;  z-index: 6" 
<h2>Cascading Style Sheets</h2>
<p>CSS is a style sheet language that enables Web page writers to specify 
   presentation, sizing, and positioning properties of HTML and XML documents. 
   CSS is used to describe the appearance of a document in a manner that is 
   independent of its content. There are currently two versions of CSS (referred 
   to as <a href="" target="external">CSS1</a> and 
   <a href="" target="external">CSS2</a>). CSS2 
   extends CSS1.</p></div><div class="panel" style="background-color: cyan;  
   z-index: 5" id="p1panel3">
<h2>Document Object Model</h2>
<p>The <a href="" target="external">DOM</a> is a model 
   that describes the objects that are available within HTML and XML documents. 
   It describes these objects in a programming language-independent manner as a 
   system of interfaces. It defines the properties of these objects and methods 
   for accessing these objects. The objects can be accessed via programming 
   languages, such as JavaScript and Java.</p>
</div><div class="panel" style="background-color: rgb(170,170,255);  z-index: 4" 
<p><a href="" 
   target="external">JavaScript</a> is a programming language for scripting Web 
   pages that was developed by Netscape. It has been standardized by the ECMA 
   and is referred to as ECMAScript. JavaScript has evolved into a general-
   purpose scripting language - it is no longer limited to Web pages. Microsoft 
   has also developed a version of JavaScript that is named JScript.</p>
</div><div class="panel" style="background-color: fuchsia;  z-index: 3" 
<h2>Dynamic HTML</h2>
<p><a href="" target="external">DHTML</a> is 
   a combination of HTML, CSS, and JavaScript that enables Web page content to 
   exhibit dynamic behavior. This is accomplished by dynamically changing the 
   properties of document objects in response to user actions and other 
</div><div class="panel" style="background-color: lime;  z-index: 2" 
<h2>Extensible Markup Language</h2>
<a href="" target="external">XML</a> is a language for 
   creating structured documents for use with the Web and in other application 
   areas. XML is a simplified subset of the Standard Generalized Markup Language 
   (SGML) that is used to create custom markup languages that follow a common 
</div><div class="panel" style="background-color: silver;  z-index: 1" 
<h2>XSL Transformations</h2>
<a href="" target="external">XSLT</a> is a part of the 
   Extensible Stylesheet Language (XSL) that is used to transform XML documents 
   from one format into another format. XSLT style sheets are written in XML. 
   These style sheets specify how XML documents are to be translated. They are 
   provided as input to a translation program, which performs the actual 
</div></div><img border="0" height="50"><p></p></body></html>


Related examples in the same category

1.Tab Manager 1
2.Tab Manager 2
3.Tab control for a game
4.Tabs in JavaScript
5.Tab with control inside
6.Slide tab
7.Four Tab with different style
8.XP Tab in JavaScript
9.Two tab in one page
10.HTML style tab
11.Calendar in tab
12.Tab in javascript
13.Tab from gwidgets_0.8.0
14.One tab: Easy Tabs 1.2
15.Two tab: Easy Tabs 1.2
16.three tabs: Easy Tabs 1.2
17.Tabber Example
18.Nested tab and tab changed event
19.Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected