Two tab in one page : Tab : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Tab »

 

Two tab in one page



<!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" />

<!-- webfxlayout.js -->
<script type="text/javascript">
/* this is a dummy webfxlayout file to be used in download zip files */


/* Do includes */

if (window.pathToRoot == null)
  pathToRoot = "./";

document.write('<link type="text/css" rel="stylesheet" href="local/webfxlayout.css">');
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("<div id='webfx-title-background'></div>");
    if (op) {
      document.write("<h1 id='webfx-title' style='top:9px;'>" + s + "</h1>");
    }
    else {
      document.write("<h1 id='webfx-title'>" + s + "</h1>");
    }

    if (s2 == null)
      s2 = "WebFX - What you never thought possible!";
    
    if (op) {
      document.write("<span id='webfx-sub-title' style='top:46px;'>" + s2 + "</span>");
    }
    else {
      document.write("<span id='webfx-sub-title'>" + s2 + "</span>");
    }
  },
  writeMainTitle  :  function () {
    this.writeTitle("WebFX""What you never thought possible!");  
  },
  writeTopMenuBar    :  function () {
    document.write("<div id='webfx-menu-bar-1'></div>");
    if (op) {
      document.write("<style>.webfx-menu-bar a {padding-top:3px;}</style>");
      document.write("<div id='webfx-menu-bar-2' style='height:2px;'></div>");
    }
    else
      document.write("<div id='webfx-menu-bar-2'></div>");
    document.write("<div id='webfx-menu-bar'>");// div is closed in writeBottomMenuBar
  },
  writeBottomMenuBar  :  function () {
    document.write("</div>");
    if (op)
      document.write("<div id='webfx-menu-bar-3' style='height:0px;'></div>");
    else
      document.write("<div id='webfx-menu-bar-3'></div>");
    document.write("<div id='webfx-menu-bar-4'></div>");
    document.write("<div id='webfx-menu-bar-5'></div>");
  },
  writeMenu      :  function () {
    this.writeTopMenuBar();
    //document.write(webfxMenuBar);
    document.write("<div class='webfx-menu-bar'><a href='http://webfx.eae.net'>WebFX Home</a></div>");
    this.writeBottomMenuBar();
  },
  writeDesignedByEdger  :  function () {
    if (ie && document.body.currentStyle.writingMode != null)
      document.write("<div id='webfx-about'>Page designed and maintained by " +
          "<a href='mailto:erik@eae.net'>Erik Arvidsson</a> &amp; " +
          "<a href='mailto:eae@eae.net'>Emil A Eklund</a>.</div>");
  }
};

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() {}
</script>

<!-- this link element includes the css definitions that describes the tab pane -->
<!--
<link type="text/css" rel="stylesheet" href="tab.winclassic.css" />
-->
<!-- tab.css -->
<style id="luna-tab-style-sheet" type="text/css" rel="stylesheet" disabled="disabled">
.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>
<!-- tab.webfx.css -->
<style id="webfx-tab-style-sheet" type="text/css" rel="stylesheet" disabled="disabled">
/*

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%;
}

</style>
<!-- tab.winclassic.css -->
<style id="winclassic-tab-style-sheet" type="text/css" rel="stylesheet" disabled="disabled">
.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;
}

</style>
<!-- the id is not needed. It is used here to be able to change css file at runtime -->

<style type="text/css">

.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;
}

</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>
</head>
<body>

<script type="text/javascript">

//define the tabpane variable
var tp1;

function setLinkSrcsStyle ) {
  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);
*/

}

</script>

<!-- Call the function: I'd like to add a tab to the tabPane -->
<a onclick="addtab('A great site!','tabPagexx1','http://webfx.eae.net');">ADD A WEBFX TAB</a><br><br>

<!-- the TabPane -->
<div class="tab-pane" id="tabPane1">
<script type="text/javascript">
tp1 = new WebFXTabPanedocument.getElementById"tabPane1" ) );
</script>

  <!-- a Tab -->
  <div class="tab-page" id="tabPage1">
    <h2 class="tab">General</h2>
    <script type="text/javascript">tp1.addTabPagedocument.getElementById"tabPage1" ) );</script>
    <iframe src="http://www.navioo.com" style="width: 100%; height: 100%;"></iframe>
  </div>


</div>

  <!-- a Tab -->
  <div class="tab-page" id="mick">
    <h2 class="tab">General</h2>
    <iframe src="http://www.navioo.com" style="width: 100%; height: 100%;"></iframe>
  </div>


<script type="text/javascript">

setupAllTabs();

</script>

</body>
</html>



           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Tab