GUI Components JavaScript DHTML


              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Tab Pane Demo (WebFX)



/* this is a dummy webfxlayout file to be used in download zip files */
/* Do includes */
if (window.pathToRoot == null)
  pathToRoot = "./";
document.write('');
webfxMenuDefaultImagePath = pathToRoot + "images/";
/* end includes */
/* set up browser checks and add a simple emulation for IE4 */
// check browsers
var op = /opera 5|opera\/5/i.test(navigator.userAgent);
var ie = !op && /msie/i.test(navigator.userAgent);  // preventing opera to be identified as ie
var mz = !op && /mozilla\/5/i.test(navigator.userAgent);  // preventing opera to be identified as mz
if (ie && document.getElementById == null) {  // ie4
  document.getElementById = function(sId) {
    return document.all[sId];
  };
}
/* end browser checks */
webfxLayout = {
  writeTitle    :  function (s, s2) {
    document.write("

");
    if (op) {
      document.write("" + s + "");
    }
    else {
      document.write("" + s + "");
    }
    if (s2 == null)
      s2 = "WebFX - What you never thought possible!";
    
    if (op) {
      document.write("" + s2 + "");
    }
    else {
      document.write("" + s2 + "");
    }
  },
  writeMainTitle  :  function () {
    this.writeTitle("WebFX", "What you never thought possible!");  
  },
  writeTopMenuBar    :  function () {
    document.write("

");
    if (op) {
      document.write("");
      document.write("

");
    }
    else
      document.write("");
    document.write("");// div is closed in writeBottomMenuBar
  },
  writeBottomMenuBar  :  function () {
    document.write("");
    if (op)
      document.write("");
    else
      document.write("");
    document.write("");
    document.write("");
  },
  writeMenu      :  function () {
    this.writeTopMenuBar();
    //document.write(webfxMenuBar);
    document.write("WebFX Home");
    this.writeBottomMenuBar();
  },
  writeDesignedByEdger  :  function () {
    if (ie && document.body.currentStyle.writingMode != null)
      document.write("Page designed and maintained by " +
          "Erik Arvidsson & " +
          "Emil A Eklund.");
  }
};
if (ie && window.attachEvent) {
  window.attachEvent("onload", function () {
    var scrollBorderColor  =  "rgb(120,172,255)";
    var scrollFaceColor    =  "rgb(234,242,255)";
    with (document.body.style) {
      scrollbarDarkShadowColor  =  scrollBorderColor;
      scrollbar3dLightColor    =  scrollBorderColor;
      scrollbarArrowColor      =  "black";
      scrollbarBaseColor      =  scrollFaceColor;
      scrollbarFaceColor      =  scrollFaceColor;
      scrollbarHighlightColor    =  scrollFaceColor;
      scrollbarShadowColor    =  scrollFaceColor;
      scrollbarTrackColor      =  "white";
    }
  });
}
/* we also need some dummy constructors */
webfxMenuBar = {
  add : function () {}
};
function WebFXMenu() {
  this.add = function () {};
}
function WebFXMenuItem() {}
function WebFXMenuSeparator() {}
function WebFXMenuButton() {}





.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 rgb( 145, 155, 156 );
  background:    rgb( 252, 252, 254 );
  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;
}



/*
bright: rgb(234,242,255);
normal: rgb(120,172,255);
dark:  rgb(0,66,174);
*/
.dynamic-tab-pane-control.tab-pane {
  position:  relative;
  width:    100%;
}
.dynamic-tab-pane-control .tab-row .tab {
  font-family:  Verdana, Helvetica, Arial;
  font-size:    12px;
  cursor:      Default;
  display:    inline;
  margin:      1px -5px 1px 5px;
  float:      left;
  padding:    3px 6px 3px 6px;
  background:    rgb(234,242,255);
  border:      1px solid;
  border-color:  rgb(120,172,255);
  border-left:  0;
  border-bottom:  0;
  border-top:    0;
  
  cursor:      hand;
  cursor:      pointer;
  
  z-index:    1;
  position:    relative;
  top:      0;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
  border:      1px solid rgb(120,172,255);
  border-bottom:  0;
  z-index:    3;
  padding:    2px 6px 5px 6px;
  margin:      1px -6px -2px 0px;
  top:      -2px;
  background:    white;
}
.dynamic-tab-pane-control .tab-row .tab a {
  font-family:    Verdana, Helvetica, Arial;
  font-size:      13px;
  color:        rgb(0,66,174);
  text-decoration:  none;
  cursor:      hand;
  cursor:      pointer;  
}
.dynamic-tab-pane-control .tab-row .hover a {
  color:  rgb(0,66,174);
}
.dynamic-tab-pane-control .tab-row .tab.selected a {
  font-weight:  bold;
}
.dynamic-tab-pane-control .tab-page {
  clear:      both;
  border:      1px solid rgb(120,172,255);
  background:    White;
  z-index:    2;
  position:    relative;
  top:      -2px;
  color:      Black;
  font-family:  Verdana, Helvetica, Arial;
  font-size:    13px;
  padding:    10px;
}
.dynamic-tab-pane-control .tab-row {
  z-index:    1;
  white-space:  nowrap;
  background:    rgb(234,242,255);
  height:      1.85em;
  width:      100%;
}



.dynamic-tab-pane-control.tab-pane {
  position:  relative;
  width:    100%;
}
.dynamic-tab-pane-control .tab-row .tab {
  font:      Menu;
  cursor:      Default;
  display:    inline;
  margin:      1px -2px 1px 2px;
  float:      left;
  padding:    2px 5px 3px 5px;
  background:    ThreeDFace;
  border:      1px solid;
  border-color:  ThreeDHighlight ThreeDDarkShadow
          ThreeDDarkShadow ThreeDHighlight;
  border-bottom:  0;
  z-index:    1;
  position:    relative;
  top:      0;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
  border-bottom:  0;
  z-index:    3;
  padding:    2px 6px 5px 7px;
  margin:      1px -3px -2px 0px;
  top:      -2px;
}
.dynamic-tab-pane-control .tab-row .tab a {
  font:        Menu;
  color:        WindowText;
  text-decoration:  none;
  cursor:        default;
}
.dynamic-tab-pane-control .tab-row .hover a {
  color:  blue;
}
.dynamic-tab-pane-control .tab-page {
  clear:      both;
  border:      1px solid;
  border-color:  ThreeDHighlight ThreeDDarkShadow
          ThreeDDarkShadow ThreeDHighlight;
  background:    ThreeDFace;
  z-index:    2;
  position:    relative;
  top:      -2px;
  color:      WindowText;
  font:      Message-Box;
  padding:    10px;
}
.dynamic-tab-pane-control .tab-row {
  z-index:    1;
  white-space:  nowrap;
}



.dynamic-tab-pane-control .tab-page {
  height:    200px;
}
.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
  height:    100px;
}
html, body {
  background:  ThreeDFace;
}
form {
  margin:    0;
  padding:  0;
}
/* over ride styles from webfxlayout */
body {
  margin:    10px;
  width:    auto;
  height:    auto;
}
.dynamic-tab-pane-control h2 {
  text-align:  center;
  width:    auto;
}
.dynamic-tab-pane-control h2 a {
  display:  inline;
  width:    auto;
}
.dynamic-tab-pane-control a:hover {
  background: transparent;
}



/*----------------------------------------------------------------------------\
|                               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.test( navigator.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._getElementsByTagName( sTagName );
    };
  }
  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 WebFXTabPane( el, 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.insertBefore( this.tabRow, el.firstChild );
  var tabIndex = 0;
  if ( this.useCookie ) {
    tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
    if ( isNaN( tabIndex ) )
      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 == 1 && cs[i].className == "tab-page") {
      this.addTabPage( cs[i] );
    }
  }
}
WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";
WebFXTabPane.prototype.setSelectedIndex = function ( n ) {
  if (this.selectedIndex != n) {
    if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
      this.pages[ this.selectedIndex ].hide();
    this.selectedIndex = n;
    this.pages[ this.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[n] = new WebFXTabPage( oElement, this, n );
  tp.tabPane = this;
  
  // move the tab out of the box
  this.tabRow.appendChild( tp.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[i] = null;
  }
  this.pages = null;
};
// Cookie handling
WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
  var expires = "";
  if ( nDays ) {
    var d = new Date();
    d.setTime( d.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.exec( document.cookie );
  return res != null ? res[3] : null;
};
WebFXTabPane.removeCookie = function ( name ) {
  setCookie( name, "", -1 );
};
///////////////////////////////////////////////////////////////////////////////////
// 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 WebFXTabPage( el, 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 == 1 && 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.appendChild( this.tab.firstChild );
  this.tab.appendChild( a );
  
  // hook up events, using DOM0
  var oThis = this;
  this.tab.onclick = function () { oThis.select(); };
  this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
  this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
}
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.setSelectedIndex( this.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.test( cn ) && !el.tabPane )
      new WebFXTabPane( el );
  
    // unitiated tab page wit a valid tab pane parent
    else if ( tabPageRe.test( cn ) && !el.tabPage &&
          tabPaneRe.test( el.parentNode.className ) ) {
      el.parentNode.tabPane.addTabPage( el );      
    }
  }
}
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.test( cn ) && el.tabPane )
      tabPanes[tabPanes.length] = el.tabPane;
  }
  
  for (var i = tabPanes.length - 1; i >= 0; i--) {
    tabPanes[i].dispose();
    tabPanes[i] = null;
  }
}
// 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 ( e ) {
      oldOnload( e );
      setupAllTabs();
    };
  }
  else 
    window.onload = setupAllTabs;
}




//define the tabpane variable
var tp1;
function setLinkSrc( sStyle ) {
  document.getElementById( "luna-tab-style-sheet" ).disabled = sStyle != "luna";
  document.getElementById( "webfx-tab-style-sheet" ).disabled = sStyle != "webfx"
  document.getElementById( "winclassic-tab-style-sheet" ).disabled = sStyle != "winclassic"
  
  document.documentElement.style.background = 
  document.body.style.background = sStyle == "webfx" ? "white" : "ThreeDFace";  
}
setLinkSrc( "luna" );
  
//MY FUNCTION: add a tab dinamically
function addtab(t,id,target) {
  tp1.addTabPage("mick");
  /*
  //the div containing the tab
  var newtab = document.createElement('div'); 
  newtab.id=id;
  newtab.className="tab-page";
  document.getElementById("tabPane1").appendChild(newtab);
  
  //the tab's title
  var titolo = document.createElement('h2');
  titolo.innerHTML=t;
  newtab.className="tab";
  newtab.appendChild(titolo);
  //add the script inside the tab (i think is wrong...)
  var script = document.createElement('script');
  script.defer = true;
  script.type="text/javascript";
  script.text=' tp1.addTabPage( document.getElementById( "'+id+'" ) ); ';
  void(newtab.appendChild(script));
  //add the frame inside the tab
  var ifr = document.createElement('iframe');
  ifr.style.width="100%";
  ifr.style.height="100%";
  ifr.src=target;
  newtab.appendChild(ifr);
*/
}


ADD A WEBFX TAB





tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );

  
  
    General
    tp1.addTabPage( document.getElementById( "tabPage1" ) );
    
  

  
  
    General
    
  

setupAllTabs();