XP Tab in JavaScript : Tab « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Tab 
XP Tab in JavaScript
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Tab Pane Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- tab.css -->
<style>
.dynamic-tab-pane-control.tab-pane {
  position:  relative;
  width:    100%;    /* width needed weird IE bug */
  margin-right:  -2px;  /* to make room for the shadow */
}

.dynamic-tab-pane-control .tab-row .tab {

  width:        70px;
  height:        16px;
  background-image:  url"lunaImage/tab.png" );
  
  position:    relative;
  top:      0;
  display:    inline;
  float:      left;
  overflow:    hidden;
  
  cursor:      Default;

  margin:      1px -1px 1px 2px;
  padding:    2px 0px 0px 0px;
  border:      0;

  z-index:    1;
  font:      11px Tahoma;
  white-space:  nowrap;
  text-align:    center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
  width:        74px !important;
  height:        18px !important;
  background-image:  url"lunaImage/tab.active.png" !important;
  background-repaet:  no-repeat;

  border-bottom-width:  0;
  z-index:    3;
  padding:    2px 0 0px 0;
  margin:      1px -3px -3px 0px;
  top:      -2px;
  font:        11px Tahoma;
}

.dynamic-tab-pane-control .tab-row .tab a {
  font:        11px Tahoma;
  color:        Black;
  text-decoration:  none;
  cursor:        default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
  font:        11px Tahoma;
  width:        70px;
  height:        16px;
  background-image:  url"lunaImage/tab.hover.png" );
  background-repaet:  no-repeat;
}


.dynamic-tab-pane-control .tab-page {
  clear:      both;
  border:      1px solid rgb145155156 );
  background:    rgb252252254 );
  z-index:    2;
  position:    relative;
  top:      -2px;

  font:        11px Tahoma;
  color:        Black;

  filter:      progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
          progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
  
  /*244, 243, 238*/
  /* 145, 155, 156*/
  
  padding:    10px;
}

.dynamic-tab-pane-control .tab-row {
  z-index:    1;
  white-space:  nowrap;
}
</style>
<!-- tabpane.js -->
<script type="text/javascript">
/*----------------------------------------------------------------------------\
|                               Tab Pane 1.02                                 |
|-----------------------------------------------------------------------------|
|                         Created by Erik Arvidsson                           |
|                  (http://webfx.eae.net/contact.html#erik)                   |
|                      For WebFX (http://webfx.eae.net/)                      |
|-----------------------------------------------------------------------------|
|                  Copyright (c) 1998 - 2003 Erik Arvidsson                   |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including  but not limited  to the warranties of  merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or  copyright  holders be  liable for any claim,  damages or  other |
| liability, whether  in an  action of  contract, tort  or otherwise, arising |
| from,  out of  or in  connection with  the software or  the  use  or  other |
| dealings in the software.                                                   |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| This  software is  available under the  three different licenses  mentioned |
| below.  To use this software you must chose, and qualify, for one of those. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Non-Commercial License          http://webfx.eae.net/license.html |
| Permits  anyone the right to use the  software in a  non-commercial context |
| free of charge.                                                             |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Commercial license           http://webfx.eae.net/commercial.html |
| Permits the  license holder the right to use  the software in a  commercial |
| context. Such license must be specifically obtained, however it's valid for |
| any number of  implementations of the licensed software.                    |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |
| Permits anyone the right to use and modify the software without limitations |
| as long as proper  credits are given  and the original  and modified source |
| code are included. Requires  that the final product, software derivate from |
| the original  source or any  software  utilizing a GPL  component, such  as |
| this, is also licensed under the GPL license.                               |
|-----------------------------------------------------------------------------|
| 2002-01-?? | First working version                                          |
| 2002-02-17 | Cleaned up for 1.0 public version                              |
| 2003-02-18 | Changed from javascript uri for anchors to return false        |
| 2003-03-03 | Added dispose methods to release IE memory                     |
|-----------------------------------------------------------------------------|
| Dependencies: *.css           a css file to define the layout               |
|-----------------------------------------------------------------------------|
| Created 2002-01-?? | All changes are in the log above. | Updated 2003-03-03 |
\----------------------------------------------------------------------------*/

// This function is used to define if the browser supports the needed
// features
function hasSupport() {

  if (typeof hasSupport.support != "undefined")
    return hasSupport.support;
  
  var ie55 = /msie 5\.[56789]/i.testnavigator.userAgent );
  
  hasSupport.support = typeof document.implementation != "undefined" &&
      document.implementation.hasFeature"html""1.0" || ie55 )
      
  // IE55 has a serious DOM1 bug... Patch it!
  if ie55 ) {
    document._getElementsByTagName = document.getElementsByTagName;
    document.getElementsByTagName = function sTagName ) {
      if sTagName == "*" )
        return document.all;
      else
        return document._getElementsByTagNamesTagName );
    };
  }

  return hasSupport.support;
}

///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab panes
//
// el : HTMLElement    The html element used to represent the tab pane
// bUseCookie : Boolean  Optional. Default is true. Used to determine whether to us
//            persistance using cookies or not
//
function WebFXTabPaneel, bUseCookie ) {
  if !hasSupport() || el == null return;
  
  this.element = el;
  this.element.tabPane = this;
  this.pages = [];
  this.selectedIndex = null;
  this.useCookie = bUseCookie != null ? bUseCookie : true;
  
  // add class name tag to class name
  this.element.className = this.classNameTag + " " this.element.className;
  
  // add tab row
  this.tabRow = document.createElement"div" );
  this.tabRow.className = "tab-row";
  el.insertBeforethis.tabRow, el.firstChild );

  var tabIndex = 0;
  if this.useCookie ) {
    tabIndex = NumberWebFXTabPane.getCookie"webfxtab_" this.element.id ) );
    if isNaNtabIndex ) )
      tabIndex = 0;
  }
  this.selectedIndex = tabIndex;
  
  // loop through child nodes and add them
  var cs = el.childNodes;
  var n;
  for (var i = 0; i < cs.length; i++) {
    if (cs[i].nodeType == && cs[i].className == "tab-page") {
      this.addTabPagecs[i] );
    }
  }
}

WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";

WebFXTabPane.prototype.setSelectedIndex = function ) {
  if (this.selectedIndex != n) {
    if (this.selectedIndex != null && this.pagesthis.selectedIndex != null )
      this.pagesthis.selectedIndex ].hide();
    this.selectedIndex = n;
    this.pagesthis.selectedIndex ].show();
    
    if this.useCookie )
      WebFXTabPane.setCookie"webfxtab_" this.element.id, n );  // session cookie
  }
};
  
WebFXTabPane.prototype.getSelectedIndex = function () {
  return this.selectedIndex;
};
  
WebFXTabPane.prototype.addTabPage = function oElement ) {
  if !hasSupport() ) return;
  
  if oElement.tabPage == this )  // already added
    return oElement.tabPage;

  var n = this.pages.length;
  var tp = this.pages[nnew WebFXTabPageoElement, this, n );
  tp.tabPane = this;
  
  // move the tab out of the box
  this.tabRow.appendChildtp.tab );
      
  if n == this.selectedIndex )
    tp.show();
  else
    tp.hide();
    
  return tp;
};
  
WebFXTabPane.prototype.dispose = function () {
  this.element.tabPane = null;
  this.element = null;    
  this.tabRow = null;
  
  for (var i = 0; i < this.pages.length; i++) {
    this.pages[i].dispose();
    this.pages[inull;
  }
  this.pages = null;
};



// Cookie handling
WebFXTabPane.setCookie = function sName, sValue, nDays ) {
  var expires = "";
  if nDays ) {
    var d = new Date();
    d.setTimed.getTime() + nDays * 24 60 60 1000 );
    expires = "; expires=" + d.toGMTString();
  }

  document.cookie = sName + "=" + sValue + expires + "; path=/";
};

WebFXTabPane.getCookie = function (sName) {
  var re = new RegExp"(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
  var res = re.execdocument.cookie );
  return res != null ? res[3null;
};

WebFXTabPane.removeCookie = function name ) {
  setCookiename, "", -);
};








///////////////////////////////////////////////////////////////////////////////////
// The constructor for tab pages. This one should not be used.
// Use WebFXTabPage.addTabPage instead
//
// el : HTMLElement      The html element used to represent the tab pane
// tabPane : WebFXTabPane  The parent tab pane
// nindex :  Number      The index of the page in the parent pane page array
//
function WebFXTabPageel, tabPane, nIndex ) {
  if !hasSupport() || el == null return;
  
  this.element = el;
  this.element.tabPage = this;
  this.index = nIndex;
  
  var cs = el.childNodes;
  for (var i = 0; i < cs.length; i++) {
    if (cs[i].nodeType == && cs[i].className == "tab") {
      this.tab = cs[i];
      break;
    }
  }
  
  // insert a tag around content to support keyboard navigation
  
  
  var a = document.createElement"A" );
  this.aElement = a;
  a.href = "#";
  a.onclick = function () { return false};
  while this.tab.hasChildNodes() )
    a.appendChildthis.tab.firstChild );
  this.tab.appendChild);

  
  // hook up events, using DOM0
  var oThis = this;
  this.tab.onclick = function () { oThis.select()};
  this.tab.onmouseover = function () { WebFXTabPage.tabOveroThis )};
  this.tab.onmouseout = function () { WebFXTabPage.tabOutoThis )};
}

WebFXTabPage.prototype.show = function () {
  var el = this.tab;
  var s = el.className + " selected";
  s = s.replace(/ +/g, " ");
  el.className = s;
  
  this.element.style.display = "block";
};

WebFXTabPage.prototype.hide = function () {
  var el = this.tab;
  var s = el.className;
  s = s.replace(/ selected/g, "");
  el.className = s;

  this.element.style.display = "none";
};
  
WebFXTabPage.prototype.select function () {
  this.tabPane.setSelectedIndexthis.index );
};
  
WebFXTabPage.prototype.dispose = function () {
  this.aElement.onclick = null;
  this.aElement = null;
  this.element.tabPage = null;
  this.tab.onclick = null;
  this.tab.onmouseover = null;
  this.tab.onmouseout = null;
  this.tab = null;
  this.tabPane = null;
  this.element = null;
};

WebFXTabPage.tabOver = function tabpage ) {
  var el = tabpage.tab;
  var s = el.className + " hover";
  s = s.replace(/ +/g, " ");
  el.className = s;
};

WebFXTabPage.tabOut = function tabpage ) {
  var el = tabpage.tab;
  var s = el.className;
  s = s.replace(/ hover/g, "");
  el.className = s;
};


// This function initializes all uninitialized tab panes and tab pages
function setupAllTabs() {
  if !hasSupport() ) return;

  var all = document.getElementsByTagName"*" );
  var l = all.length;
  var tabPaneRe = /tab\-pane/;
  var tabPageRe = /tab\-page/;
  var cn, el;
  var parentTabPane;
  
  for var i = 0; i < l; i++ ) {
    el = all[i]
    cn = el.className;

    // no className
    if cn == "" continue;
    
    // uninitiated tab pane
    if tabPaneRe.testcn && !el.tabPane )
      new WebFXTabPaneel );
  
    // unitiated tab page wit a valid tab pane parent
    else if tabPageRe.testcn && !el.tabPage &&
          tabPaneRe.testel.parentNode.className ) ) {
      el.parentNode.tabPane.addTabPageel );      
    }
  }
}

function disposeAllTabs() {
  if !hasSupport() ) return;
  
  var all = document.getElementsByTagName"*" );
  var l = all.length;
  var tabPaneRe = /tab\-pane/;
  var cn, el;
  var tabPanes = [];
  
  for var i = 0; i < l; i++ ) {
    el = all[i]
    cn = el.className;

    // no className
    if cn == "" continue;
    
    // tab pane
    if tabPaneRe.testcn && el.tabPane )
      tabPanes[tabPanes.length= el.tabPane;
  }
  
  for (var i = tabPanes.length - 1; i >= 0; i--) {
    tabPanes[i].dispose();
    tabPanes[inull;
  }
}


// initialization hook up

// DOM2
if typeof window.addEventListener != "undefined" )
  window.addEventListener"load", setupAllTabs, false );

// IE 
else if typeof window.attachEvent != "undefined" ) {
  window.attachEvent"onload", setupAllTabs );
  window.attachEvent"onunload", disposeAllTabs );
}

else {
  if window.onload != null ) {
    var oldOnload = window.onload;
    window.onload = function ) {
      oldOnload);
      setupAllTabs();
    };
  }
  else 
    window.onload = setupAllTabs;
}
</script>

<script>

window.onload = function () {
  window.setTimeout("document.location.reload()"10000);
};

</script>
</head>
<body>

<p>This page reloads as soon as the page is loaded... look at the memory consuption.</p>

<div class="tab-pane" id="tabPane1">

  <div class="tab-page" id="tabPage1">
    <h2 class="tab">General</h2>
    
    <table><tr><td>
      This is text of tab 1. This is text of tab 1. This is text of tab 1. 
      This is text of tab 1. This is text of tab 1. This is text of tab 1. 
      This is text of tab 1. This is text of tab 1. This is text of tab 1.
    </td></tr></table>
    
  </div>

  <div class="tab-page" id="tabPage2">
    <h2 class="tab">Security</h2>
    
    <table><tr><td>
      This is text of tab 2. This is text of tab 2. This is text of tab 2. 
      This is text of tab 2. This is text of tab 2. This is text of tab 2. 
      This is text of tab 2. This is text of tab 2. This is text of tab 2.
      <br />
      <br />
      This is text of tab 2. This is text of tab 2. This is text of tab 2. 
      This is text of tab 2. This is text of tab 2. This is text of tab 2. 
      This is text of tab 2. This is text of tab 2. This is text of tab 2.
    </td></tr></table>
    
  </div>

  <div class="tab-page" id="tabPage3">
    <h2 class="tab">Privacy</h2>
    
    <table><tr><td>
      This is text of tab 3. This is text of tab 3. This is text of tab 3. 
      This is text of tab 3. This is text of tab 3. This is text of tab 3. 
      This is text of tab 3. This is text of tab 3. This is text of tab 3.
    </td></tr></table>
    
  </div>

  <div class="tab-page" id="tabPage4">
    <h2 class="tab">Content</h2>
    
    <table><tr><td>
      This is text of tab 4. This is text of tab 4. This is text of tab 4. 
      This is text of tab 4. This is text of tab 4. This is text of tab 4. 
      This is text of tab 4. This is text of tab 4. This is text of tab 4.
    </td></tr></table>
    
  </div>

</div>

</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. Tab control
8. Four Tab with different style
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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.