Текущая версия на 10:43, 26 мая 2010

Содержание

1 Calendar in tab
2 Four Tab with different style
3 " + s + "
4 " + s + "
5 " + s + "
6 " + s + "
7 Advanced Tabber Example
8 Tabber Example
9 Tabber Example
10 Tabbed Panel
11 " + s + "
12 " + s + "

Calendar in tab

   <source lang="html4strict">

 //Definindo linguagem - pt = portugues. Mensagens de erro serao apresentadas nesta lingua
 lang = "pt";
 //criando o documento base para adicionar os objetos
 docbody      = new JsDocument("docbody");
 //Funcoes extras para mostrar a adicao de eventos aos objetos:
 //Esta funcaum eh adicionada ao evento change do combobox
 function testeChange(e)
 {
   alert("mudou");
 }
 //funcao utilizada pelos botoes para transferir itens de um listbox para outro
 function transfer1_2()
 {
   transferListItens(listbox1, listbox2);
 }
 //funcao utilizada pelos botoes para transferir itens de um listbox para outro
 function transfer2_1()
 {
   transferListItens(listbox2, listbox1);
 }
 //funcao so para retornar o valor atual do calendario
 function teste(e)
 {
   alert(cal.getValue());
 }
 
 //funcao para ver se o treeview esta retornando ok
 function toolbarClick()
 {
   alert("Clicou no toolbar");
 }
 //funcaum para adicionar itens no listview
 function lstvaddItems()
 {
   //gerador de valor randomico para o nome dos objetos criados
   itemname = randomizer();
   //Menu do Item
   menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
   menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
   menu_adicionar.setValue("Adicionar");
   menu_adicionar.setIcon("images/new.gif");
   menu_adicionar.setEvent("click", lstvaddItems);
   menu.addItem(menu_adicionar);
   menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
   menu_remover.setValue("Remover");
   menu_remover.setIcon("images/delete.gif");
   menu_remover.setEvent("click", lstvdelItems);
   menu_remover.setAttribute("lstparent",itemname);
   menu.addItem(menu_remover);
   listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
   list_teste.addItem(listviewitem);
   check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
   check.setLabel("Teste");
   check.setValue("true");
   listviewitem.addItem(randomizer(),"",true);
   listviewitem.addItem(check);
   listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
   listviewitem.setMenu(menu);
 }
 //funcaum para remover itens do listview
 function lstvdelItems(e)
 {  
   if (browserType == "ie")
   {
     e = window.event;
     obj = e.srcElement;
   }
   else
   {
     obj = e.target;
   }
   var lsitem = eval(obj.lstparent);
   list_teste.delItem(lsitem);
   temMudanca = true;
 }
 
 function treeaddItems()
 {
   //gerador de valor randomico para o nome dos objetos criados
   itemname = randomizer();
   //Menu do Item
   menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
   menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
   menu_adicionar.setValue("Adicionar");
   menu_adicionar.setIcon("images/new.gif");
   menu_adicionar.setEvent("click", treeaddItems);
   menu.addItem(menu_adicionar);
   menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem("" + itemname + "_menu_adicionarsub")");
   menu_adicionarsub.setValue("Adicionar SubItem");
   menu_adicionarsub.setIcon("images/new.gif");
   menu_adicionarsub.setEvent("click", treeaddSubItems);
   menu_adicionarsub.setAttribute("lstparent",itemname);
   menu.addItem(menu_adicionarsub);
   menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
   menu_remover.setValue("Remover");
   menu_remover.setIcon("images/delete.gif");
   menu_remover.setEvent("click", treedelItems);
   menu_remover.setAttribute("lstparent",itemname);
   menu.addItem(menu_remover);
   listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
   tree_teste.addItem(listviewitem);
   check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
   check.setLabel("Teste");
   check.setValue("true");
   listviewitem.addItem(randomizer(),"",true);
   listviewitem.addItem(check);
   listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
   listviewitem.setMenu(menu);
 }
 
 function treeaddSubItems(e)
 {
   if (browserType == "ie")
   {
     e = window.event;
     obj = e.srcElement;
   }
   else
   {
     obj = e.target;
   }
   var lsitem = eval(obj.lstparent);
   
   //gerador de valor randomico para o nome dos objetos criados
   itemname = randomizer();
   //Menu do Item
   menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
   menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
   menu_adicionar.setValue("Adicionar");
   menu_adicionar.setIcon("images/new.gif");
   menu_adicionar.setEvent("click", treeaddItems);
   menu.addItem(menu_adicionar);
   menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem("" + itemname + "_menu_adicionarsub")");
   menu_adicionarsub.setValue("Adicionar SubItem");
   menu_adicionarsub.setIcon("images/new.gif");
   menu_adicionarsub.setEvent("click", treeaddSubItems);
   menu_adicionarsub.setAttribute("lstparent",itemname);
   menu.addItem(menu_adicionarsub);
   menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
   menu_remover.setValue("Remover");
   menu_remover.setIcon("images/delete.gif");
   menu_remover.setEvent("click", treedelItems);
   menu_remover.setAttribute("lstparent",itemname);
   menu.addItem(menu_remover);
   listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
   lsitem.addItem(listviewitem);
   check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
   check.setLabel("Teste");
   check.setValue("true");
   listviewitem.addItem(randomizer(),"",true);
   listviewitem.addItem(check);
   listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
   listviewitem.setMenu(menu);
 }
 
 function treedelItems(e)
 {
   if (browserType == "ie")
   {
     e = window.event;
     obj = e.srcElement;
   }
   else
   {
     obj = e.target;
   }
   
   var lsitem = eval(obj.lstparent);
   lsitem.parent.delItem(lsitem);
   temMudanca = true;
 }
 //MenuBar
 menubar = new JsMenuBar("menubar");
 menubaritem1 = new JsMenu("menubaritem1");
 menubaritem2 = new JsMenu("menubaritem2");
 submenubaritem2 = new JsMenu("submenubaritem2");
 menubaritemsubitem1_1 = new JsMenuItem("menubaritemsubitem1_1");
 menubaritemsubitem1_2 = new JsMenuItem("menubaritemsubitem1_2");
 menubaritemsubitem1_3 = new JsMenuItem("menubaritemsubitem1_3");
 menubaritemsubitem1_4 = new JsMenuItem("menubaritemsubitem1_4");
 menubaritemsubitem2_1 = new JsMenuItem("menubaritemsubitem2_1");
 menubaritemsubitem2_2 = new JsMenuItem("menubaritemsubitem2_2");
 menubaritemsubitem2_3 = new JsMenuItem("menubaritemsubitem2_3");
 menubaritemsubitem2_4 = new JsMenuItem("menubaritemsubitem2_4");
 submenubaritemsubitem2_1 = new JsMenuItem("submenubaritemsubitem2_1");
 submenubaritemsubitem2_2 = new JsMenuItem("submenubaritemsubitem2_2");
 submenubaritemsubitem2_3 = new JsMenuItem("submenubaritemsubitem2_3");
 submenubaritemsubitem2_4 = new JsMenuItem("submenubaritemsubitem2_4");
 menubaritem1.setValue("Menu 1");
 menubaritemsubitem1_1.setValue("Item 1");
 menubaritemsubitem1_2.setValue("Item 2");
 menubaritemsubitem1_3.setValue("Item 3");
 menubaritemsubitem1_4.setValue("Item 4");
 menubaritem2.setValue("Menu 2");
 menubaritemsubitem2_1.setValue("Item 1");
 menubaritemsubitem2_2.setValue("Item 2");
 menubaritemsubitem2_3.setValue("Item 3");
 menubaritemsubitem2_4.setValue("Item 4");
 submenubaritem2.setValue("SubMenu 2");
 submenubaritemsubitem2_1.setValue("SubItem 1");
 submenubaritemsubitem2_2.setValue("SubItem 2");
 submenubaritemsubitem2_3.setValue("SubItem 3");
 submenubaritemsubitem2_4.setValue("SubItem 4");
 menubar.addItem(menubaritem1);
 menubar.addItem(menubaritem2);
 menubaritem1.addItem(menubaritemsubitem1_1);
 menubaritem1.addItem(menubaritemsubitem1_2);
 menubaritem1.addItem(menubaritemsubitem1_3);
 menubaritem1.addItem(menubaritemsubitem1_4);
 menubaritem2.addItem(menubaritemsubitem2_1);
 menubaritem2.addItem(menubaritemsubitem2_2);
 menubaritem2.addItem(menubaritemsubitem2_3);
 menubaritem2.addItem(menubaritemsubitem2_4);
 menubaritem2.addItem(submenubaritem2);
 submenubaritem2.addItem(submenubaritemsubitem2_1);
 submenubaritem2.addItem(submenubaritemsubitem2_2);
 submenubaritem2.addItem(submenubaritemsubitem2_3);
 submenubaritem2.addItem(submenubaritemsubitem2_4);
 docbody.addItem(menubar);
 //Toolbar
 toolbar = new JsToolBar("toolbar");
 toolbarbt1 = new JsToolBarButton("toolbarbt1");
 toolbarbt2 = new JsToolBarButton("toolbarbt2");
 toolbarbt3 = new JsToolBarButton("toolbarbt3");
 toolbarbt1.setSource("images/filenew.gif");
 toolbarbt2.setSource("images/fileopen.gif");
 toolbarbt3.setSource("images/trash.gif");
 
 toolbarbt1.setEvent("click",toolbarClick);
 toolbar.addItem(toolbarbt1);
 toolbar.addItem(toolbarbt2);
 toolbar.addDiv();
 toolbar.addItem(toolbarbt3);
 docbody.addItem(toolbar);
 //Grid principal, e de conteudo, que contera o tab
 //Serve pricipalmente para fazer o alinhamento dos elementos na tela
 maingrid = new JsWidgetGrid("grid");
 maingrid.setHeight(300);
 maingrid.addRow();
 maingrid.addCell("100%","10","center","top");
 maingrid.addRow();
 maingrid.addCell("100%","","center","top");
 docbody.addItem(maingrid);
 contentgrid = new JsWidgetGrid("grid");
 contentgrid.setWidth("95%");
 contentgrid.addRow();
 contentgrid.addCell("100%","","","top");
 maingrid.addItem(contentgrid);
 //Exemplo de tab
 tab_teste = new JsTab("tab_teste");
 tab_teste.addTab("Listview e TreeView (menu de contexto)");
 tab_teste.addTab("Combobox e Lineedit");
 tab_teste.addTab("Listbox e botao");
 tab_teste.addTab("Calendario e dateedit");
 tab_teste.setWidth("100%");
 tab_teste.setHeight("450");
 contentgrid.addItem(tab_teste);
 //Exemplo de listview com menu de contexto
 adigenmenu      = new JsMenu("adigenmenu");
 adigenmenuitem    = new JsMenuItem("adigenmenuitem");
 adigenmenuitem.setValue("Adicionar");
 adigenmenuitem.setIcon("images/new.gif");
 adigenmenuitem.setEvent("click", lstvaddItems);
 adigenmenu.addItem(adigenmenuitem);
 list_teste = new JsListView("list_teste");
 list_teste.setHeight(190)
 list_teste.addColumn("Coluna 1",200);
 list_teste.addColumn("Coluna 2",300);
 list_teste.addColumn("Coluna 3",400);
 
 list_label = new JsLabel("list_label");
 list_label.setValue("ListView");
 list_label.setHeight(30);
 list_teste.setMenu(adigenmenu);
 tab_teste.addItemToTab(list_label,0);
 tab_teste.addItemToTab(list_teste,0);
 
 //Exemplo de TreeView com menu de contexto
 adigentreemenu      = new JsMenu("adigentreemenu");
 adigentreemenuitem    = new JsMenuItem("adigentreemenuitem");
 adigentreemenuitem.setValue("Adicionar");
 adigentreemenuitem.setIcon("images/new.gif");
 adigentreemenuitem.setEvent("click", treeaddItems);
 adigentreemenu.addItem(adigentreemenuitem);
 
 tree_teste = new JsListView("tree_teste");
 tree_teste.setTreeView();
 tree_teste.setHeight(190)
 tree_teste.addColumn("Coluna 1",200);
 tree_teste.addColumn("Coluna 2",300);
 tree_teste.addColumn("Coluna 3",400);
 
 tree_label = new JsLabel("tree_label");
 tree_label.setValue("TreeView");
 tree_label.setHeight(30);
 
 tree_teste.setMenu(adigentreemenu);
 
 tab_teste.addItemToTab(tree_label,0);
 tab_teste.addItemToTab(tree_teste,0);
 //Exemplo de lineedit
 //criamos um grid para distribuir melhor os elementos na tela
 lineeditgrid = new JsWidgetGrid("lineeditgrid");
 lineeditgrid.setHeight(60);
 //label 1
 label1 = new JsLabel("label1");
 label2 = new JsLabel("label2");
 lineedit1 = new JsLineEdit("lineedit1");
 lineedit2 = new JsLineEdit("lineedit2");
 label1.setValue("Label 1");
 label2.setValue("Label 2");
 lineeditgrid.addRow();
 lineeditgrid.addCell("60");
 lineeditgrid.addItem(label1);
 lineeditgrid.addCell();
 lineeditgrid.addItem(lineedit1);
 lineeditgrid.addRow();
 lineeditgrid.addCell("60");
 lineeditgrid.addItem(label2);
 lineeditgrid.addCell();
 lineeditgrid.addItem(lineedit2);
 tab_teste.addItemToTab(lineeditgrid,1);
 //Exemplo de combobox
 combobox_teste = new JsComboBox("combobox_teste");
 for (var i=1; i < 20; i++)
   combobox_teste.addItem(i, "test - " + i, "images/user_small.gif");
 combobox_teste.setEvent("change", testeChange);
 tab_teste.addItemToTab(combobox_teste,1);
 //listbox example
 lsitboxgrid = new JsWidgetGrid("lsitboxgrid");
 listbox_bt1 = new JsPushButton("listbox_bt1");
 listbox_bt1.setValue(">>");
 listbox_bt1.setEvent("click", transfer1_2);
 listbox_bt1.setWidth("50");
 listbox_bt2 = new JsPushButton("listbox_bt2");
 listbox_bt2.setValue("<<");
 listbox_bt2.setEvent("click", transfer2_1);
 listbox_bt2.setWidth("50");
 listbox1 = new JsListBox("listbox1");
 listbox1.setHeight("300");
 listbox1.setWidth("100%");
 listbox2 = new JsListBox("listbox2");
 listbox2.setHeight("300");
 listbox2.setWidth("100%");
 for (var i=0; i < 20; i++)
   listbox1.addItem("test - " + i, "","");
 lsitboxgrid.addRow();
 lsitboxgrid.addCell("45%");
 lsitboxgrid.addItem(listbox1);
 lsitboxgrid.addCell(10);
 lsitboxgrid.addCell(50,null,"center");
 lsitboxgrid.addItem(listbox_bt1);
 lsitboxgrid.addItem(listbox_bt2);
 lsitboxgrid.addCell(10);
 lsitboxgrid.addCell("45%");
 lsitboxgrid.addItem(listbox2);
 tab_teste.addItemToTab(lsitboxgrid,2);
 //Calendario
 cal    = new JsCalendar("cal");
 data  = new JsDateEdit("data");
 cal.setEvent("click", teste);
 tab_teste.addItemToTab(data,3);
 tab_teste.addItemToTab(cal,3);
 
 //for (i=0;i<50;i++)
   //lstvaddItems();

</script> </html>

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/jsobjects.zip">jsobjects.zip( 366 k)</a>

Four Tab with different style

   <source lang="html4strict">

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

/* 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("

");

   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("<style>.webfx-menu-bar a {padding-top:3px;}</style>");

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("");

   this.writeBottomMenuBar();
 },
 writeDesignedByEdger  :  function () {
   if (ie && document.body.currentStyle.writingMode != null)

document.write("

Page designed and maintained by " +

         "<a href="mailto:erik@eae.net">Erik Arvidsson</a> & " +

"<a href="mailto:eae@eae.net">Emil A Eklund</a>.

");

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

 position:  relative;
 width:    100%;

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

 font:      Menu;
 cursor:      Default;
 display:    inline;
 margin:      1px -1px 1px 2px;
 float:      left;
 padding:    2px 5px 3px 5px;
 background:    ActiveBorder;
 border:      0;/* 1px solid; */
 border-color:  ThreeDHighlight ThreeDDarkShadow
         ThreeDDarkShadow ThreeDHighlight;
 border-bottom:  0;
 z-index:    1;
 white-space:  nowrap;
 position:    relative;
 top:      0;

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

 background:    ThreeDHighlight !important;
 border:      1px solid ThreeDDarkShadow;
 border-bottom:  0;
 z-index:    3;
 padding:    2px 6px 4px 6px;
 margin:      1px -3px -3px 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 .tab.hover {

 background:  Highlight;

} .dynamic-tab-pane-control .tab-page {

 clear:      both;
 border:      1px solid ThreeDDarkShadow;
 background:    ThreeDHighlight;
 z-index:    2;
 position:    relative;
 top:      -2px;
 color:      WindowText;
 font:      Message-Box;
 padding:    10px;
 
 height:      200px;

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

 z-index:    1;
 white-space:  nowrap;

} </style>

/

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

 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>

 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>

 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;

} </script> </head> <body> <script type="text/javascript"> 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" ); </script> <form action="#"> <fieldset>

 <legend>Select Style Sheet</legend>

<input id="luna-radio" type="radio" name="tab-css-radio" checked="checked"

 value="css/luna/tab.css" onclick="setLinkSrc("luna")"/>

<label for="luna-radio">luna/tab.css</label>
<input id="webfx-radio" type="radio" name="tab-css-radio" value="css/tab.webfx.css"

  onclick="setLinkSrc("webfx")" />

<label for="webfx-radio">tab.webfx.css</label>
<input id="classic-radio" type="radio" name="tab-css-radio"

 value="css/tab.winclassic.css" onclick="setLinkSrc("winclassic")"/>

<label for="classic-radio">tab.winclassic.css</label> </fieldset> </form>

General

   <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
   
   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.

Security

   <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script>
   
   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.
   

   

   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.

Privacy

   <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage3" ) );</script>
   
   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.

Content

   <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage4" ) );</script>
   
   <fieldset>
     <legend>Content</legend>
     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.
   </fieldset>

Another tab below

General

   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.

Security

   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.
   

   

   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.

Nested

General

       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.

Privacy

       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.

</script> </body> </html>

 </source>

HTML style tab

   <source lang="html4strict">

<!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 (WebFX)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

/* 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("

");

   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("<style>.webfx-menu-bar a {padding-top:3px;}</style>");

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);
   
   this.writeBottomMenuBar();
 },
 writeDesignedByEdger  :  function () {
   if (ie && document.body.currentStyle.writingMode != null)

document.write("

Page designed and maintained by " +

         "<a href="mailto:erik@eae.net">Erik Arvidsson</a> & " +

"<a href="mailto:eae@eae.net">Emil A Eklund</a>.

");

}; 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 script is used for WebFX Api pages
*
*  It defines one funtion and includes helptip.js, helptip.css and webfxapi.css
*/

document.write( "<script type="text/javascript" src="local/helptip.js"><\/script>" ); document.write( "<link type="text/css" rel="stylesheet" href="local/helptip.css" />" ); document.write( "<link type="text/css" rel="stylesheet" href="local/webfxapi.css" />" ); function toggleMethodArguments( e, a ) {

 if ( a && a.nextSibling &&
   typeof a.nextSibling.innerHTML != "undefined" &&
   typeof showHelpTip != "undefined" ) {
 
   showHelpTip( e, a.nextSibling.innerHTML );
   
 }

}

</script>

 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;

} </script>

/

.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> <style type="text/css"> .dynamic-tab-pane-control .tab-page {

 height:    500px;
 width:    558px;
 overflow:  auto;

} .dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {

 height:    100px;

} form {

 margin:    0;
 padding:  0;

} /* over ride styles from webfxlayout */ .dynamic-tab-pane-control.tab-pane {

 margin:  10px;
 width:  580px;

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

} .dynamic-tab-pane-control .tab-page h2 {

 text-align:  left;

} </style> <script type="text/javascript"> var tabPane; function showArticleTab( sName ) {

 if (typeof tabPane != "undefined" ) {
 
   switch ( sName ) {
   
     case "main":
       tabPane.setSelectedIndex( 0 );
       break;
       
     case "usage":
       tabPane.setSelectedIndex( 1 );
       break;
   
     case "api":
       tabPane.setSelectedIndex( 2 );
       break;
     case "implementation":
       tabPane.setSelectedIndex( 3 );
       break;
       
     case "looknfeel":
       tabPane.setSelectedIndex( 4 );
       break;
   }  
 }

} // help tips htDom = "Document Object Model 1 is a standard developed by the W3C.
" +

   "<a href=\"http://www.w3.org/DOM/\" target=\"_blank\">http://www.w3.org/DOM/</a>";

</script> </head> <body>

Introduction

You might remember.

This Tab Pane control is.

The Tab Pane.

Usage

Include the Files

To.

The

The.

Below is the code for a simple tab pane with the tab pages.

<div class="tab-pane" id="tab-pane-1">
   <div class="tab-page">
      <h2 class="tab">General</h2>
            
      This is text of tab 1. This is text of tab 1.
      This is text of tab 1. This is text of tab 1.
            
   </div>
   <div class="tab-page">
      <h2 class="tab">Privacy</h2>
            
      This is text of tab 2. This is text of tab 2.
      This is text of tab 2. This is text of tab 2.
            
   </div>
</div>

Notice that the id is not needed unless two or more tab panes are present in the same document and you are using the persistence feature.

Initialization

The best way to.

API

WebFXTabPane

This is the

Syntax

new WebFXTabPane(oElement [, bUseCookie])

Parameters

Name Type Descripton

oElement HTMLElement The html element that represents the tab pane

bUseCookie

Boolean

Optional.

       If this is set to true then the selected tab is persisted.      
     
         The default value is true.

Static Methods

Name Description

<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setCookie</a>

Syntax

object.setCookie(sName, sValue [, nDays])

Arguments

Name	Type	Descripton
`sName`	`String`	The name of the cookie
`sValue`	`String`	The value of the cookie
`nDays`	`Number`	Optional. The number of days to store the cookie

Return Type

void

Sets a cookie

<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getCookie</a>

Syntax

object.getCookie(sName)

Arguments

Name	Type	Descripton
`sName`	`String`	The name of the cookie

Return Type

String

Retrieves a cookie by name

<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">removeCookie</a>

Syntax

object.removeCookie(sName)

Arguments

Name	Type	Descripton
`sName`	`String`	The name of the cookie to remove

Return Type

void

Removes a cookie by name

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">addTabPage</a>

Syntax

object.addTabPage(oElement)

Arguments

Name	Type	Descripton
`oElement`	`HTMLElement`	The html element that represents the tab page

Return Type

WebFXTabPage

Adds a tab page by passing an html element

<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">getSelectedIndex</a>

Syntax

object.getSelectedIndex()

Arguments

No Arguments.

Return Type

Number

The index of the selected tab page

<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setSelectedIndex</a>

Syntax

object.setSelectedIndex(n)

Arguments

Name	Type	Descripton
`n`	`Number`	The index of the tab page to select

Return Type

void

Sets the selected tab page by index

Fields

Name	Type	Descripton
`classNameTag`	`String`	This string is added to the class name to tag the tab pane as beeing created
`element`	`HTMLElement`	Read only.The html element being that represents the tab pane
`pages`	`WebFXTabPages[]`	Read only.An array containing the tab pages
`selectedIndex`	`Number`	Read only.The index of the selected tab page
`tabRow`	`HTMLElement`	Read only.The html element that encloses all tabs
`useCookie`	`Boolean`	Is used to decide if the selected tab page index should be persisted using a cookie.

Remarks

None.

WebFXTabPage

This is the class representing a tab page.

Syntax

new WebFXTabPage(oElement, oTabPane, nIndex)

Parameters

Name	Type	Descripton
`oElement`	`HTMLElement`	The html element that represents the tab page
`oTabPane`	`WebFXTabPane`	The tab pane to add the page to
`nIndex`	`Number`	The index of the tab page

Static Methods

Name	Description
None.

Static Fields

Name	Type	Descripton
None.

Methods

Name	Description
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">hide</a> Syntax `object.hide()` Arguments No Arguments. Return Type `void`	Hides the tab page
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">select</a> Syntax `object.select()` Arguments No Arguments. Return Type `void`	Selects the tab page
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">show</a> Syntax `object.show()` Arguments No Arguments. Return Type `void`	Makes the tab page visible

Fields

Name	Type	Descripton
`element`	`HTMLElement`	Read only.The html element being used as the page
`index`	`Number`	Read only. The index of the tab page in the tab pane pages array.
`tab`	`HTMLElement`	Read only.The html element being used as the tab.

Remarks

Do not use this constructor manually. Use addTabPage of the WebFXTabPane class instead.

Globals

Functions

Name	Description
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">hasSupport</a> Syntax `hasSupport()` Arguments No Arguments. Return Type `Boolean`	Returns whether the browser is supported or not
<a class="helpLink" href="javascript://" onclick="toggleMethodArguments( event, this ); return false;">setupAllTabs</a> Syntax `setupAllTabs()` Arguments No Arguments. Return Type `void`	Initializes all tab panes and tab pages that have not been initialized already.

Objects

Name	Type	Descripton
None.

Implementation

Check for support

The way to check the browser whether it support a certain feature in the DOM is to use the method document.implementation.hasFeature. However since IE5.5 supports all the features that this script needs but it does not support this way of checking for support we have to add a separate check for IE55.

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

As you can see in the code above IE55 has a bug an therefore we also patch that. Too many people are still using IE55 to just ignore it.

WebFXTabPane

The constructor for the tab pane creates the tabRow div that is used to place all the actual tabs in. It also checks the cookie state so that the selected tab can be persisted. Besides from this it sets up some properties needed to keep track of the states. Last but not least it checks the childNodes of the element and adds the found tab pages.

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

There are a few methods added to the WebFXTabPane class and one of the more important ones is the method addTabPage. This method takes the element that represents the tab page and uses that to create a WebFXTabPage object that is added to the pages array. Once the tab page has been added it also checks if this page is the selected one and if it is it shows it.

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

WebFXTabPage

This class is used to keep track of the actual tab page. Once created it moves the tab element to the tabRow of the tab pane. It also adds an anchor around the text so that the user can use the keyboard to activate the tabs.

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" );
   a.href = "javascript:void 0;";
   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 ); };
}

Initialization

The initialization uses the global function setupAllTabs that goes through all elements and checks their class names and if the class names match the classes used by the tab pane controls it checks whether this element belongs to an uninitialized control and in that case it initializes it now.

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

This function can be called manually at any time but the script makes hooks to the load event for the window. This is done using DOM level 2 events if available. If not we test if it supports the IE5 way of attaching events and last we fall back on classic way of setting events.

// DOM2
if ( typeof window.addEventListener != "undefined" )
   window.addEventListener( "load", setupAllTabs, false );
// IE 
else if ( typeof window.attachEvent != "undefined" )
   window.attachEvent( "onload", setupAllTabs );
else {
   if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
         oldOnload( e );
         setupAllTabs();
      };
   }
   else 
      window.onload = setupAllTabs;
}

Look & Feel

The structure

To be able to change the look and feel one needs to understand the structure of the tab pane. When the original XHTML source tree is transformed into the tab pane the class name of the element representing the tab pane is tagged with the property classNameTag. The default tag is dynamic-tab-pane-control and therefore all your css rules should take this into account. If you want different look on different tab panes in the same document this tag can be changed to make the css rules easier to set up.

<div class="dynamic-tab-pane-control tab-pane" id="tab-pane-1">
   <div class="tab-row">
      <h2 class="tab selected"><a ... >General</a></h2>
      <h2 class="tab hover"><a ... >Privacy</a></h2>
   </div>
   <div class="tab-page">
      
      This is text of tab 1. This is text of tab 1.
      This is text of tab 1. This is text of tab 1.
            
   </div>
   <div class="tab-page">
      
      This is text of tab 2. This is text of tab 2.
      This is text of tab 2. This is text of tab 2.
            
   </div>
</div>

The selected tab will have the class name tab selected and the tab that the mouse hovers over will have the class name tab hover. If the selected tab is hovered it will have the class name tab selected hover. These rules allow you to differentiate the look of tabs between the different states.

The CSS Rules

Here we will walk through the <a href="css/tab.winclassic.css">Windows Classic css file</a>. First we set the width and position of the tab pane to prevent a few rendering bugs in IE6.

.dynamic-tab-pane-control.tab-pane {
   position:        relative;
   width:           100%;
}
.dynamic-tab-pane-control .tab-row {
   z-index:         1;
   white-space:     nowrap;
}

Then we setup the css for the tab. Notice how the position is set to relative to allow the top position to be slightly changed and to allow the z-index property to be changed to position the tabs below the tab pages.

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

For the selected tab we set the z-index to 3 to put it above the tab pages. We also move it a little and change some other properties to make it look more like the classic window tab control.

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

Then we override the text properties on the tabs as well as for the .hover rule.

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

Then we set the z-index for the tab pages to 2 so that it will be shown above tabs but below the selected tab. We also set the borders and and a few other properties.

.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:            MessageBox;
   font:            Message-Box;
   padding:         10px;
}

Author: Erik Arvidsson

</body> </html>

 </source>

Nested tab and tab changed event

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Advanced Tabber Example</title> <style TYPE="text/css" MEDIA="screen"> /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*--------------------------------------------------

 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/

.tabberlive .tabbertabhide {

display:none;

} /*--------------------------------------------------

 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/

.tabber { } .tabberlive {

margin-top:1em;

} /*--------------------------------------------------

 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/

ul.tabbernav {

margin:0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;

} ul.tabbernav li {

list-style: none;
margin: 0;
display: inline;

} ul.tabbernav li a {

padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;

} ul.tabbernav li a:link { color: #448; } ul.tabbernav li a:visited { color: #667; } ul.tabbernav li a:hover {

color: #000;
background: #AAE;
border-color: #227;

} ul.tabbernav li.tabberactive a {

background-color: #fff;
border-bottom: 1px solid #fff;

} ul.tabbernav li.tabberactive a:hover {

color: #000;
background: white;
border-bottom: 1px solid white;

} /*--------------------------------------------------

 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/

.tabberlive .tabbertab {

padding:5px;
border:1px solid #aaa;
border-top:0;
/* If you don"t want the tab size changing whenever a tab is changed
   you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
   scrollbar when necessary */
/* overflow:auto; */

} /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 {

display:none;

} .tabberlive .tabbertab h3 {

display:none;

} /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab {

height:200px;
overflow:auto;

}

</style> <script type="text/javascript"> /* Optional: Temporarily hide the "tabber" class so it does not "flash"

  on the page as plain HTML. After tabber runs, the class is changed
  to "tabberlive" and it will appear.

/

document.write("<style type="text/css">.tabber{display:none;}<\/style>"); var tabberOptions = {

 /* Optional: instead of letting tabber run during the onload event,
    we"ll start it up manually. This can be useful because the onload
    even runs after all the images have finished loading, and we can
    run tabber at the bottom of our page to start it up faster. See the
    bottom of this page for more info. Note: this variable must be set
    BEFORE you include tabber.js.
 */
 "manualStartup":true,
 /* Optional: code to run after each tabber object has initialized */
 "onLoad": function(argsObj) {
   /* Display an alert only after tab2 */
   if (argsObj.tabber.id == "tab2") {
     alert("Finished loading tab2!");
   }
 },
 /* Optional: code to run when the user clicks a tab. If this
    function returns boolean false then the tab will not be changed
    (the click is canceled). If you do not return a value or return
    something that is not boolean false, */
 "onClick": function(argsObj) {
   var t = argsObj.tabber; /* Tabber object */
   var id = t.id; /* ID of the main tabber DIV */
   var i = argsObj.index; /* Which tab was clicked (0 is the first tab) */
   var e = argsObj.event; /* Event object */
   if (id == "tab2") {
     return confirm("Swtich to "+t.tabs[i].headingText+"?\nEvent type: "+e.type);
   }
 },
 /* Optional: set an ID for each tab navigation link */
 "addLinkId": true

}; </script> <script type="text/javascript"> /*

 $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
 tabber.js by Patrick Fitzgerald pat@barelyfitz.ru
 Documentation can be found at the following URL:
 http://www.barelyfitz.ru/projects/tabber/
 License (http://www.opensource.org/licenses/mit-license.php)
 Copyright (c) 2006 Patrick Fitzgerald
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation files
 (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify, merge,
 publish, distribute, sublicense, and/or sell copies of the Software,
 and to permit persons to whom the Software is furnished to do so,
 subject to the following conditions:
 The above copyright notice and this permission notice shall be
 included in all copies or substantial portions of the Software.
 THE 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.
 */

function tabberObj(argsObj) {

 var arg; /* name of an argument to override */
 /* Element for the main tabber div. If you supply this in argsObj,
    then the init() method will be called.
 */
 this.div = null;
 /* Class of the main tabber div */
 this.classMain = "tabber";
 /* Rename classMain to classMainLive after tabifying
    (so a different style can be applied)
 */
 this.classMainLive = "tabberlive";
 /* Class of each DIV that contains a tab */
 this.classTab = "tabbertab";
 /* Class to indicate which tab should be active on startup */
 this.classTabDefault = "tabbertabdefault";
 /* Class for the navigation UL */
 this.classNav = "tabbernav";
 /* When a tab is to be hidden, instead of setting display="none", we
    set the class of the div to classTabHide. In your screen
    stylesheet you should set classTabHide to display:none.  In your
    print stylesheet you should set display:block to ensure that all
    the information is printed.
 */
 this.classTabHide = "tabbertabhide";
 /* Class to set the navigation LI when the tab is active, so you can
    use a different style on the active tab.
 */
 this.classNavActive = "tabberactive";
 /* Elements that might contain the title for the tab, only used if a
    title is not specified in the TITLE attribute of DIV classTab.
 */
 this.titleElements = ["h2","h3","h4","h5","h6"];
 /* Should we strip out the HTML from the innerHTML of the title elements?
    This should usually be true.
 */
 this.titleElementsStripHTML = true;
 /* If the user specified the tab names using a TITLE attribute on
    the DIV, then the browser will display a tooltip whenever the
    mouse is over the DIV. To prevent this tooltip, we can remove the
    TITLE attribute after getting the tab name.
 */
 this.removeTitle = true;
 /* If you want to add an id to each link set this to true */
 this.addLinkId = false;
 /* If addIds==true, then you can set a format for the ids.
    <tabberid> will be replaced with the id of the main tabber div.
    <tabnumberzero> will be replaced with the tab number
      (tab numbers starting at zero)
    <tabnumberone> will be replaced with the tab number
      (tab numbers starting at one)
    <tabtitle> will be replaced by the tab title
      (with all non-alphanumeric characters removed)
  */
 this.linkIdFormat = "<tabberid>nav<tabnumberone>";
 /* You can override the defaults listed above by passing in an object:
    var mytab = new tabber({property:value,property:value});
 */
 for (arg in argsObj) { this[arg] = argsObj[arg]; }
 /* Create regular expressions for the class names; Note: if you
    change the class names after a new object is created you must
    also change these regular expressions.
 */
 this.REclassMain = new RegExp("\\b" + this.classMain + "\\b", "gi");
 this.REclassMainLive = new RegExp("\\b" + this.classMainLive + "\\b", "gi");
 this.REclassTab = new RegExp("\\b" + this.classTab + "\\b", "gi");
 this.REclassTabDefault = new RegExp("\\b" + this.classTabDefault + "\\b", "gi");
 this.REclassTabHide = new RegExp("\\b" + this.classTabHide + "\\b", "gi");
 /* Array of objects holding info about each tab */
 this.tabs = new Array();
 /* If the main tabber div was specified, call init() now */
 if (this.div) {
   this.init(this.div);
   /* We don"t need the main div anymore, and to prevent a memory leak
      in IE, we must remove the circular reference between the div
      and the tabber object. */
   this.div = null;
 }

}

/*--------------------------------------------------

 Methods for tabberObj
 --------------------------------------------------*/

tabberObj.prototype.init = function(e) {

 /* Set up the tabber interface.
    e = element (the main containing div)
    Example:
    init(document.getElementById("mytabberdiv"))
  */
 var
 childNodes, /* child nodes of the tabber div */
 i, i2, /* loop indices */
 t, /* object to store info about a single tab */
 defaultTab=0, /* which tab to select by default */
 DOM_ul, /* tabbernav list */
 DOM_li, /* tabbernav list item */
 DOM_a, /* tabbernav link */
 aId, /* A unique id for DOM_a */
 headingElement; /* searching for text to use in the tab */
 /* Verify that the browser supports DOM scripting */
 if (!document.getElementsByTagName) { return false; }
 /* If the main DIV has an ID then save it. */
 if (e.id) {
   this.id = e.id;
 }
 /* Clear the tabs array (but it should normally be empty) */
 this.tabs.length = 0;
 /* Loop through an array of all the child nodes within our tabber element. */
 childNodes = e.childNodes;
 for(i=0; i < childNodes.length; i++) {
   /* Find the nodes where class="tabbertab" */
   if(childNodes[i].className &&
      childNodes[i].className.match(this.REclassTab)) {
     
     /* Create a new object to save info about this tab */
     t = new Object();
     
     /* Save a pointer to the div for this tab */
     t.div = childNodes[i];
     
     /* Add the new object to the array of tabs */
     this.tabs[this.tabs.length] = t;
     /* If the class name contains classTabDefault,
  then select this tab by default.
     */
     if (childNodes[i].className.match(this.REclassTabDefault)) {
 defaultTab = this.tabs.length-1;
     }
   }
 }
 /* Create a new UL list to hold the tab headings */
 DOM_ul = document.createElement("ul");
 DOM_ul.className = this.classNav;
 
 /* Loop through each tab we found */
 for (i=0; i < this.tabs.length; i++) {
   t = this.tabs[i];
   /* Get the label to use for this tab:
      From the title attribute on the DIV,
      Or from one of the this.titleElements[] elements,
      Or use an automatically generated number.
    */
   t.headingText = t.div.title;
   /* Remove the title attribute to prevent a tooltip from appearing */
   if (this.removeTitle) { t.div.title = ""; }
   if (!t.headingText) {
     /* Title was not defined in the title of the DIV,
  So try to get the title from an element within the DIV.
  Go through the list of elements in this.titleElements
  (typically heading elements ["h2","h3","h4"])
     */
     for (i2=0; i2<this.titleElements.length; i2++) {
 headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
 if (headingElement) {
   t.headingText = headingElement.innerHTML;
   if (this.titleElementsStripHTML) {
     t.headingText.replace(/
/gi," ");
     t.headingText = t.headingText.replace(/<[^>]+>/g,"");
   }
   break;
 }
     }
   }
   if (!t.headingText) {
     /* Title was not found (or is blank) so automatically generate a
        number for the tab.
     */
     t.headingText = i + 1;
   }
   /* Create a list element for the tab */
   DOM_li = document.createElement("li");
   /* Save a reference to this list item so we can later change it to
      the "active" class */
   t.li = DOM_li;
   /* Create a link to activate the tab */
   DOM_a = document.createElement("a");
   DOM_a.appendChild(document.createTextNode(t.headingText));
   DOM_a.href = "javascript:void(null);";
   DOM_a.title = t.headingText;
   DOM_a.onclick = this.navClick;
   /* Add some properties to the link so we can identify which tab
      was clicked. Later the navClick method will need this.
   */
   DOM_a.tabber = this;
   DOM_a.tabberIndex = i;
   /* Do we need to add an id to DOM_a? */
   if (this.addLinkId && this.linkIdFormat) {
     /* Determine the id name */
     aId = this.linkIdFormat;
     aId = aId.replace(/<tabberid>/gi, this.id);
     aId = aId.replace(/<tabnumberzero>/gi, i);
     aId = aId.replace(/<tabnumberone>/gi, i+1);
     aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ""));
     DOM_a.id = aId;
   }
   /* Add the link to the list element */
   DOM_li.appendChild(DOM_a);
   /* Add the list element to the list */
   DOM_ul.appendChild(DOM_li);
 }
 /* Add the UL list to the beginning of the tabber div */
 e.insertBefore(DOM_ul, e.firstChild);
 /* Make the tabber div "live" so different CSS can be applied */
 e.className = e.className.replace(this.REclassMain, this.classMainLive);
 /* Activate the default tab, and do not call the onclick handler */
 this.tabShow(defaultTab);
 /* If the user specified an onLoad function, call it now. */
 if (typeof this.onLoad == "function") {
   this.onLoad({tabber:this});
 }
 return this;

};

tabberObj.prototype.navClick = function(event) {

 /* This method should only be called by the onClick event of an <A>
    element, in which case we will determine which tab was clicked by
    examining a property that we previously attached to the <A>
    element.
    Since this was triggered from an onClick event, the variable
    "this" refers to the <A> element that triggered the onClick
    event (and not to the tabberObj).
    When tabberObj was initialized, we added some extra properties
    to the <A> element, for the purpose of retrieving them now. Get
    the tabberObj object, plus the tab number that was clicked.
 */
 var
 rVal, /* Return value from the user onclick function */
 a, /* element that triggered the onclick event */
 self, /* the tabber object */
 tabberIndex, /* index of the tab that triggered the event */
 onClickArgs; /* args to send the onclick function */
 a = this;
 if (!a.tabber) { return false; }
 self = a.tabber;
 tabberIndex = a.tabberIndex;
 /* Remove focus from the link because it looks ugly.
    I don"t know if this is a good idea...
 */
 a.blur();
 /* If the user specified an onClick function, call it now.
    If the function returns false then do not continue.
 */
 if (typeof self.onClick == "function") {
   onClickArgs = {"tabber":self, "index":tabberIndex, "event":event};
   /* IE uses a different way to access the event object */
   if (!event) { onClickArgs.event = window.event; }
   rVal = self.onClick(onClickArgs);
   if (rVal === false) { return false; }
 }
 self.tabShow(tabberIndex);
 return false;

};

tabberObj.prototype.tabHideAll = function() {

 var i; /* counter */
 /* Hide all tabs and make all navigation links inactive */
 for (i = 0; i < this.tabs.length; i++) {
   this.tabHide(i);
 }

};

tabberObj.prototype.tabHide = function(tabberIndex) {

 var div;
 if (!this.tabs[tabberIndex]) { return false; }
 /* Hide a single tab and make its navigation link inactive */
 div = this.tabs[tabberIndex].div;
 /* Hide the tab contents by adding classTabHide to the div */
 if (!div.className.match(this.REclassTabHide)) {
   div.className += " " + this.classTabHide;
 }
 this.navClearActive(tabberIndex);
 return this;

};

tabberObj.prototype.tabShow = function(tabberIndex) {

 /* Show the tabberIndex tab and hide all the other tabs */
 var div;
 if (!this.tabs[tabberIndex]) { return false; }
 /* Hide all the tabs first */
 this.tabHideAll();
 /* Get the div that holds this tab */
 div = this.tabs[tabberIndex].div;
 /* Remove classTabHide from the div */
 div.className = div.className.replace(this.REclassTabHide, "");
 /* Mark this tab navigation link as "active" */
 this.navSetActive(tabberIndex);
 /* If the user specified an onTabDisplay function, call it now. */
 if (typeof this.onTabDisplay == "function") {
   this.onTabDisplay({"tabber":this, "index":tabberIndex});
 }
 return this;

}; tabberObj.prototype.navSetActive = function(tabberIndex) {

 /* Note: this method does *not* enforce the rule
    that only one nav item can be active at a time.
 */
 /* Set classNavActive for the navigation list item */
 this.tabs[tabberIndex].li.className = this.classNavActive;
 return this;

};

tabberObj.prototype.navClearActive = function(tabberIndex) {

 /* Note: this method does *not* enforce the rule
    that one nav should always be active.
 */
 /* Remove classNavActive from the navigation list item */
 this.tabs[tabberIndex].li.className = "";
 return this;

};

/**/

function tabberAutomatic(tabberArgs) {

 /* This function finds all DIV elements in the document where
    class=tabber.classMain, then converts them to use the tabber
    interface.
    tabberArgs = an object to send to "new tabber()"
 */
 var
   tempObj, /* Temporary tabber object */
   divs, /* Array of all divs on the page */
   i; /* Loop index */
 if (!tabberArgs) { tabberArgs = {}; }
 /* Create a tabber object so we can get the value of classMain */
 tempObj = new tabberObj(tabberArgs);
 /* Find all DIV elements in the document that have class=tabber */
 /* First get an array of all DIV elements and loop through them */
 divs = document.getElementsByTagName("div");
 for (i=0; i < divs.length; i++) {
   
   /* Is this DIV the correct class? */
   if (divs[i].className &&
 divs[i].className.match(tempObj.REclassMain)) {
     
     /* Now tabify the DIV */
     tabberArgs.div = divs[i];
     divs[i].tabber = new tabberObj(tabberArgs);
   }
 }
 
 return this;

} function tabberAutomaticOnLoad(tabberArgs) {

 /* This function adds tabberAutomatic to the window.onload event,
    so it will run after the document has finished loading.
 */
 var oldOnLoad;
 if (!tabberArgs) { tabberArgs = {}; }
 /* Taken from: http://simon.incutio.ru/archive/2004/05/26/addLoadEvent */
 oldOnLoad = window.onload;
 if (typeof window.onload != "function") {
   window.onload = function() {
     tabberAutomatic(tabberArgs);
   };
 } else {
   window.onload = function() {
     oldOnLoad();
     tabberAutomatic(tabberArgs);
   };
 }

} /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == "undefined") {

   tabberAutomaticOnLoad();

} else {

 if (!tabberOptions["manualStartup"]) {
   tabberAutomaticOnLoad(tabberOptions);
 }

} </script> </head> <body>

Advanced Tabber Example

← <a href="http://www.barelyfitz.ru/projects/tabber/">Tabber Home</a>

In the following example, the height is not constrained, so the page jumps around when a new tab is selected. "Tab 2" contains a nested tabber.

<a name="tab1">Tab 1</a>

Tab 1 content.

Tab 2

Tab 2 content. A nested tabber:

Tab 2-1

Tab 2-1 content.

Tab 2-2

Tab 2-2 content.

Tab 2-3

Tab 2-3 content.

Tab 3

Tab 3 content.

In the following example, "Tab 2" should be selected automatically. In addition, there is an onclick function attached to the tabs so you can confirm each click.

Tab 1

Tab 1 content.

Tab 2

Long content to show the scrollbar to the right.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nonummy lorem quis neque. Etiam molestie auctor ante. Fusce in enim. Suspendisse at ipsum. Praesent eget odio vitae lorem consectetuer euismod. Mauris vel risus eget arcu congue sodales. Mauris adipiscing viverra ante. Cras pharetra augue sit amet enim. Pellentesque ac sem. Nullam pulvinar convallis orci. In tristique accumsan enim. Nam venenatis suscipit lorem. Nam ut dui sit amet libero egestas facilisis. Aliquam elementum lectus sed ipsum tincidunt aliquet. Pellentesque nec nunc at metus malesuada hendrerit. Suspendisse magna. Aliquam odio augue, eleifend non, euismod nec, molestie quis, pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

In hac habitasse platea dictumst. Aenean suscipit nisl. In mollis consequat purus. Integer scelerisque. Nullam imperdiet sapien nec lectus. Praesent in orci. Donec magna magna, posuere at, auctor in, sagittis nec, mi. Morbi volutpat, magna pharetra scelerisque lacinia, est erat ultricies neque, nec convallis lorem lorem ut dolor. Proin ac nunc eget nibh pulvinar gravida. Sed pretium, sem ac suscipit imperdiet, mauris ligula dictum nulla, pulvinar interdum pede urna vel magna. In lectus. In sed odio. Quisque eros ligula, placerat nec, tincidunt in, ullamcorper sed, lectus. Nam aliquet orci eget ante. Aliquam aliquet mattis pede. Mauris eleifend nibh vel nunc.

Sed mi lacus, sodales ac, lacinia nec, rutrum sodales, dolor. Morbi convallis molestie enim. Aenean tristique justo. Nullam erat ante, tempor a, suscipit ut, luctus vitae, erat. Proin fermentum. Etiam id erat ut est scelerisque volutpat. Praesent gravida libero vitae sapien. Donec vel elit. In non enim nec quam rutrum sollicitudin. Suspendisse tincidunt adipiscing ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam vel nulla non augue varius pretium. Integer vestibulum enim vel tortor.

Nulla at massa. Vivamus turpis urna, ultrices eget, auctor ullamcorper, ultricies quis, urna. Proin lobortis tincidunt orci. Duis quam neque, mattis vel, rutrum vitae, porttitor id, libero. Vestibulum sagittis lorem eget pede. Curabitur dignissim, nisi sit amet porttitor dignissim, quam felis condimentum arcu, eget facilisis metus lacus in quam. Nulla semper. In hac habitasse platea dictumst. Aenean luctus diam. Aenean consequat massa quis nisi.

Curabitur quam odio, ornare vel, hendrerit ac, sagittis mattis, ipsum. Fusce accumsan, dolor ac suscipit gravida, tortor nibh cursus ligula, at posuere orci arcu euismod ipsum. Nunc iaculis, turpis quis mattis imperdiet, nibh sapien venenatis nulla, id ornare tortor nunc in risus. Morbi lacinia mollis nulla. Donec tempus vestibulum diam. Praesent aliquet metus non orci. Nulla dictum pulvinar sem. Proin mi. Maecenas pharetra enim eget elit. Ut interdum libero ac est. Phasellus accumsan. Praesent vulputate vehicula elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla pretium diam non felis. Aenean at nisl. Proin rutrum tempus mauris. In metus ante, congue eu, vestibulum in, tincidunt sit amet, tortor. Suspendisse non enim eget elit imperdiet fringilla. Pellentesque odio erat, consequat vitae, euismod nec, congue sed, lectus. Praesent tempor urna.

Tab 3

The name of this tab is taken from the TITLE attribute instead of from the H2 element, then the TITLE attribute is erased so it does not cause a mouseover tooltip over the content area.

  the onload event. Instead let"s run it now, to prevent any delay
  while images load.

/

tabberAutomatic(tabberOptions); </script> </body> </html>

 </source>

One tab: Easy Tabs 1.2

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Easy Tabs 1.2 - presented by Kollermedia.at</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:11px;} /*Example for a Menu Style*/ .menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px;width:200px;} .menu ul {margin:0px; padding:0px; list-style:none; text-align:center;} .menu li {display:inline; line-height:23px;} .menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;} .menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}

tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {border:1px solid #ececec; width:198px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}

</style>

/

//EASY TABS 1.2 - MENU SETTINGS //Set the id names of your tablink (without a number at the end) var tablink_idname = new Array("tablink") //Set the id name of your tabcontentarea (without a number at the end) var tabcontent_idname = new Array("tabcontent") //Set the number of your tabs var tabcount = new Array("4") //Set the Tab wich should load at start (In this Example:Tab 2 visible on load) var loadtabs = new Array("2") //Set the Number of the Menu which should autochange (if you dont"t want to have a change menu set it to 0) var autochangemenu = 1; //the speed in seconds when the tabs should change var changespeed = 3; //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes var stoponhover = 0; //END MENU SETTINGS /*Swich EasyTabs Functions - no need to edit something here*/ function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className="tab"+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = "none";}document.getElementById(tablink_idname[menunr]+active).className="tab"+active+" tabactive";document.getElementById(tabcontent_idname[menunr]+active).style.display = "block";}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;} window.onload=function(){ var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount); if (autochangemenu!=0){start_autochange();} } </script> </head>

<body>

Easy Tabs 1.2 - Example with 1 changing Menu

<a href="#" onmouseover="easytabs("1", "1");" onfocus="easytabs("1", "1");" onclick="return false;" title="" id="tablink1">Tab 1</a>
<a href="#" onmouseover="easytabs("1", "2");" onfocus="easytabs("1", "2");" onclick="return false;" title="" id="tablink2">Tab 2 </a>
<a href="#" onmouseover="easytabs("1", "3");" onfocus="easytabs("1", "3");" onclick="return false;" title="" id="tablink3">Tab 3 </a>
<a href="#" onmouseover="easytabs("1", "4");" onfocus="easytabs("1", "4");" onclick="return false;" title="" id="tablink4">Tab 4 </a>

Tabcontent 1

Tabcontent 2

Tabcontent 3

Tabcontent 4

<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>

Settings setted for this menu:
loadtabs = 2 (load tab 2 on start)
autochangemenu = 1 (set the first menu to autochange modus (in this example there is only one menu so i have to set it to 1 or to 0 if i dont want a autochangemenu)
changespeed = 3 (change every 3 seconds)

stoponhover = 0 (don"t stop the autochange on hover)

</body> </html>

 </source>

Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>Cookies Tabber Example</title> <style TYPE="text/css" MEDIA="screen"> /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*--------------------------------------------------

 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/

.tabberlive .tabbertabhide {

display:none;

} /*--------------------------------------------------

 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/

.tabber { } .tabberlive {

margin-top:1em;

} /*--------------------------------------------------

 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/

ul.tabbernav {

margin:0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;

} ul.tabbernav li {

list-style: none;
margin: 0;
display: inline;

} ul.tabbernav li a {

padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;

} ul.tabbernav li a:link { color: #448; } ul.tabbernav li a:visited { color: #667; } ul.tabbernav li a:hover {

color: #000;
background: #AAE;
border-color: #227;

} ul.tabbernav li.tabberactive a {

background-color: #fff;
border-bottom: 1px solid #fff;

} ul.tabbernav li.tabberactive a:hover {

color: #000;
background: white;
border-bottom: 1px solid white;

} /*--------------------------------------------------

 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/

.tabberlive .tabbertab {

padding:5px;
border:1px solid #aaa;
border-top:0;
/* If you don"t want the tab size changing whenever a tab is changed
   you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
   scrollbar when necessary */
/* overflow:auto; */

} /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 {

display:none;

} .tabberlive .tabbertab h3 {

display:none;

} /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab {

height:200px;
overflow:auto;

} </style> <script type="text/javascript"> /* Optional: Temporarily hide the "tabber" class so it does not "flash"

  on the page as plain HTML. After tabber runs, the class is changed
  to "tabberlive" and it will appear. */

document.write("<style type="text/css">.tabber{display:none;}<\/style>"); /*

 Set the tabber options (must do this before including tabber.js)
 */

var tabberOptions = {

 "cookie":"tabber", /* Name to use for the cookie */
 "onLoad": function(argsObj)
 {
   var t = argsObj.tabber;
   var i;
   /* Optional: Add the id of the tabber to the cookie name to allow
      for multiple tabber interfaces on the site.  If you have
      multiple tabber interfaces (even on different pages) I suggest
      setting a unique id on each one, to avoid having the cookie set
      the wrong tab.
   */
   if (t.id) {
     t.cookie = t.id + t.cookie;
   }
   /* If a cookie was previously set, restore the active tab */
   i = parseInt(getCookie(t.cookie));
   if (isNaN(i)) { return; }
   t.tabShow(i);
   alert("getCookie(" + t.cookie + ") = " + i);
 },
 "onClick":function(argsObj)
 {
   var c = argsObj.tabber.cookie;
   var i = argsObj.index;
   alert("setCookie(" + c + "," + i + ")");
   setCookie(c, i);
 }

}; /*

 Cookie functions
 */

function setCookie(name, value, expires, path, domain, secure) {

   document.cookie= name + "=" + escape(value) +
       ((expires) ? "; expires=" + expires.toGMTString() : "") +
       ((path) ? "; path=" + path : "") +
       ((domain) ? "; domain=" + domain : "") +
       ((secure) ? "; secure" : "");

} function getCookie(name) {

   var dc = document.cookie;
   var prefix = name + "=";
   var begin = dc.indexOf("; " + prefix);
   if (begin == -1) {
       begin = dc.indexOf(prefix);
       if (begin != 0) return null;
   } else {
       begin += 2;
   }
   var end = document.cookie.indexOf(";", begin);
   if (end == -1) {
       end = dc.length;
   }
   return unescape(dc.substring(begin + prefix.length, end));

} function deleteCookie(name, path, domain) {

   if (getCookie(name)) {
       document.cookie = name + "=" +
           ((path) ? "; path=" + path : "") +
           ((domain) ? "; domain=" + domain : "") +
           "; expires=Thu, 01-Jan-70 00:00:01 GMT";
   }

} </script>

 $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
 tabber.js by Patrick Fitzgerald pat@barelyfitz.ru
 Documentation can be found at the following URL:
 http://www.barelyfitz.ru/projects/tabber/
 License (http://www.opensource.org/licenses/mit-license.php)
 Copyright (c) 2006 Patrick Fitzgerald
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation files
 (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify, merge,
 publish, distribute, sublicense, and/or sell copies of the Software,
 and to permit persons to whom the Software is furnished to do so,
 subject to the following conditions:
 The above copyright notice and this permission notice shall be
 included in all copies or substantial portions of the Software.
 THE 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.
 */

function tabberObj(argsObj) {

 var arg; /* name of an argument to override */
 /* Element for the main tabber div. If you supply this in argsObj,
    then the init() method will be called.
 */
 this.div = null;
 /* Class of the main tabber div */
 this.classMain = "tabber";
 /* Rename classMain to classMainLive after tabifying
    (so a different style can be applied)
 */
 this.classMainLive = "tabberlive";
 /* Class of each DIV that contains a tab */
 this.classTab = "tabbertab";
 /* Class to indicate which tab should be active on startup */
 this.classTabDefault = "tabbertabdefault";
 /* Class for the navigation UL */
 this.classNav = "tabbernav";
 /* When a tab is to be hidden, instead of setting display="none", we
    set the class of the div to classTabHide. In your screen
    stylesheet you should set classTabHide to display:none.  In your
    print stylesheet you should set display:block to ensure that all
    the information is printed.
 */
 this.classTabHide = "tabbertabhide";
 /* Class to set the navigation LI when the tab is active, so you can
    use a different style on the active tab.
 */
 this.classNavActive = "tabberactive";
 /* Elements that might contain the title for the tab, only used if a
    title is not specified in the TITLE attribute of DIV classTab.
 */
 this.titleElements = ["h2","h3","h4","h5","h6"];
 /* Should we strip out the HTML from the innerHTML of the title elements?
    This should usually be true.
 */
 this.titleElementsStripHTML = true;
 /* If the user specified the tab names using a TITLE attribute on
    the DIV, then the browser will display a tooltip whenever the
    mouse is over the DIV. To prevent this tooltip, we can remove the
    TITLE attribute after getting the tab name.
 */
 this.removeTitle = true;
 /* If you want to add an id to each link set this to true */
 this.addLinkId = false;
 /* If addIds==true, then you can set a format for the ids.
    <tabberid> will be replaced with the id of the main tabber div.
    <tabnumberzero> will be replaced with the tab number
      (tab numbers starting at zero)
    <tabnumberone> will be replaced with the tab number
      (tab numbers starting at one)
    <tabtitle> will be replaced by the tab title
      (with all non-alphanumeric characters removed)
  */
 this.linkIdFormat = "<tabberid>nav<tabnumberone>";
 /* You can override the defaults listed above by passing in an object:
    var mytab = new tabber({property:value,property:value});
 */
 for (arg in argsObj) { this[arg] = argsObj[arg]; }
 /* Create regular expressions for the class names; Note: if you
    change the class names after a new object is created you must
    also change these regular expressions.
 */
 this.REclassMain = new RegExp("\\b" + this.classMain + "\\b", "gi");
 this.REclassMainLive = new RegExp("\\b" + this.classMainLive + "\\b", "gi");
 this.REclassTab = new RegExp("\\b" + this.classTab + "\\b", "gi");
 this.REclassTabDefault = new RegExp("\\b" + this.classTabDefault + "\\b", "gi");
 this.REclassTabHide = new RegExp("\\b" + this.classTabHide + "\\b", "gi");
 /* Array of objects holding info about each tab */
 this.tabs = new Array();
 /* If the main tabber div was specified, call init() now */
 if (this.div) {
   this.init(this.div);
   /* We don"t need the main div anymore, and to prevent a memory leak
      in IE, we must remove the circular reference between the div
      and the tabber object. */
   this.div = null;
 }

}

/*--------------------------------------------------

 Methods for tabberObj
 --------------------------------------------------*/

tabberObj.prototype.init = function(e) {

 /* Set up the tabber interface.
    e = element (the main containing div)
    Example:
    init(document.getElementById("mytabberdiv"))
  */
 var
 childNodes, /* child nodes of the tabber div */
 i, i2, /* loop indices */
 t, /* object to store info about a single tab */
 defaultTab=0, /* which tab to select by default */
 DOM_ul, /* tabbernav list */
 DOM_li, /* tabbernav list item */
 DOM_a, /* tabbernav link */
 aId, /* A unique id for DOM_a */
 headingElement; /* searching for text to use in the tab */
 /* Verify that the browser supports DOM scripting */
 if (!document.getElementsByTagName) { return false; }
 /* If the main DIV has an ID then save it. */
 if (e.id) {
   this.id = e.id;
 }
 /* Clear the tabs array (but it should normally be empty) */
 this.tabs.length = 0;
 /* Loop through an array of all the child nodes within our tabber element. */
 childNodes = e.childNodes;
 for(i=0; i < childNodes.length; i++) {
   /* Find the nodes where class="tabbertab" */
   if(childNodes[i].className &&
      childNodes[i].className.match(this.REclassTab)) {
     
     /* Create a new object to save info about this tab */
     t = new Object();
     
     /* Save a pointer to the div for this tab */
     t.div = childNodes[i];
     
     /* Add the new object to the array of tabs */
     this.tabs[this.tabs.length] = t;
     /* If the class name contains classTabDefault,
  then select this tab by default.
     */
     if (childNodes[i].className.match(this.REclassTabDefault)) {
 defaultTab = this.tabs.length-1;
     }
   }
 }
 /* Create a new UL list to hold the tab headings */
 DOM_ul = document.createElement("ul");
 DOM_ul.className = this.classNav;
 
 /* Loop through each tab we found */
 for (i=0; i < this.tabs.length; i++) {
   t = this.tabs[i];
   /* Get the label to use for this tab:
      From the title attribute on the DIV,
      Or from one of the this.titleElements[] elements,
      Or use an automatically generated number.
    */
   t.headingText = t.div.title;
   /* Remove the title attribute to prevent a tooltip from appearing */
   if (this.removeTitle) { t.div.title = ""; }
   if (!t.headingText) {
     /* Title was not defined in the title of the DIV,
  So try to get the title from an element within the DIV.
  Go through the list of elements in this.titleElements
  (typically heading elements ["h2","h3","h4"])
     */
     for (i2=0; i2<this.titleElements.length; i2++) {
 headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
 if (headingElement) {
   t.headingText = headingElement.innerHTML;
   if (this.titleElementsStripHTML) {
     t.headingText.replace(/
/gi," ");
     t.headingText = t.headingText.replace(/<[^>]+>/g,"");
   }
   break;
 }
     }
   }
   if (!t.headingText) {
     /* Title was not found (or is blank) so automatically generate a
        number for the tab.
     */
     t.headingText = i + 1;
   }
   /* Create a list element for the tab */
   DOM_li = document.createElement("li");
   /* Save a reference to this list item so we can later change it to
      the "active" class */
   t.li = DOM_li;
   /* Create a link to activate the tab */
   DOM_a = document.createElement("a");
   DOM_a.appendChild(document.createTextNode(t.headingText));
   DOM_a.href = "javascript:void(null);";
   DOM_a.title = t.headingText;
   DOM_a.onclick = this.navClick;
   /* Add some properties to the link so we can identify which tab
      was clicked. Later the navClick method will need this.
   */
   DOM_a.tabber = this;
   DOM_a.tabberIndex = i;
   /* Do we need to add an id to DOM_a? */
   if (this.addLinkId && this.linkIdFormat) {
     /* Determine the id name */
     aId = this.linkIdFormat;
     aId = aId.replace(/<tabberid>/gi, this.id);
     aId = aId.replace(/<tabnumberzero>/gi, i);
     aId = aId.replace(/<tabnumberone>/gi, i+1);
     aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ""));
     DOM_a.id = aId;
   }
   /* Add the link to the list element */
   DOM_li.appendChild(DOM_a);
   /* Add the list element to the list */
   DOM_ul.appendChild(DOM_li);
 }
 /* Add the UL list to the beginning of the tabber div */
 e.insertBefore(DOM_ul, e.firstChild);
 /* Make the tabber div "live" so different CSS can be applied */
 e.className = e.className.replace(this.REclassMain, this.classMainLive);
 /* Activate the default tab, and do not call the onclick handler */
 this.tabShow(defaultTab);
 /* If the user specified an onLoad function, call it now. */
 if (typeof this.onLoad == "function") {
   this.onLoad({tabber:this});
 }
 return this;

};

tabberObj.prototype.navClick = function(event) {

 /* This method should only be called by the onClick event of an <A>
    element, in which case we will determine which tab was clicked by
    examining a property that we previously attached to the <A>
    element.
    Since this was triggered from an onClick event, the variable
    "this" refers to the <A> element that triggered the onClick
    event (and not to the tabberObj).
    When tabberObj was initialized, we added some extra properties
    to the <A> element, for the purpose of retrieving them now. Get
    the tabberObj object, plus the tab number that was clicked.
 */
 var
 rVal, /* Return value from the user onclick function */
 a, /* element that triggered the onclick event */
 self, /* the tabber object */
 tabberIndex, /* index of the tab that triggered the event */
 onClickArgs; /* args to send the onclick function */
 a = this;
 if (!a.tabber) { return false; }
 self = a.tabber;
 tabberIndex = a.tabberIndex;
 /* Remove focus from the link because it looks ugly.
    I don"t know if this is a good idea...
 */
 a.blur();
 /* If the user specified an onClick function, call it now.
    If the function returns false then do not continue.
 */
 if (typeof self.onClick == "function") {
   onClickArgs = {"tabber":self, "index":tabberIndex, "event":event};
   /* IE uses a different way to access the event object */
   if (!event) { onClickArgs.event = window.event; }
   rVal = self.onClick(onClickArgs);
   if (rVal === false) { return false; }
 }
 self.tabShow(tabberIndex);
 return false;

};

tabberObj.prototype.tabHideAll = function() {

 var i; /* counter */
 /* Hide all tabs and make all navigation links inactive */
 for (i = 0; i < this.tabs.length; i++) {
   this.tabHide(i);
 }

};

tabberObj.prototype.tabHide = function(tabberIndex) {

 var div;
 if (!this.tabs[tabberIndex]) { return false; }
 /* Hide a single tab and make its navigation link inactive */
 div = this.tabs[tabberIndex].div;
 /* Hide the tab contents by adding classTabHide to the div */
 if (!div.className.match(this.REclassTabHide)) {
   div.className += " " + this.classTabHide;
 }
 this.navClearActive(tabberIndex);
 return this;

};

tabberObj.prototype.tabShow = function(tabberIndex) {

 /* Show the tabberIndex tab and hide all the other tabs */
 var div;
 if (!this.tabs[tabberIndex]) { return false; }
 /* Hide all the tabs first */
 this.tabHideAll();
 /* Get the div that holds this tab */
 div = this.tabs[tabberIndex].div;
 /* Remove classTabHide from the div */
 div.className = div.className.replace(this.REclassTabHide, "");
 /* Mark this tab navigation link as "active" */
 this.navSetActive(tabberIndex);
 /* If the user specified an onTabDisplay function, call it now. */
 if (typeof this.onTabDisplay == "function") {
   this.onTabDisplay({"tabber":this, "index":tabberIndex});
 }
 return this;

}; tabberObj.prototype.navSetActive = function(tabberIndex) {

 /* Note: this method does *not* enforce the rule
    that only one nav item can be active at a time.
 */
 /* Set classNavActive for the navigation list item */
 this.tabs[tabberIndex].li.className = this.classNavActive;
 return this;

};

tabberObj.prototype.navClearActive = function(tabberIndex) {

 /* Note: this method does *not* enforce the rule
    that one nav should always be active.
 */
 /* Remove classNavActive from the navigation list item */
 this.tabs[tabberIndex].li.className = "";
 return this;

};

/**/

function tabberAutomatic(tabberArgs) {

 /* This function finds all DIV elements in the document where
    class=tabber.classMain, then converts them to use the tabber
    interface.
    tabberArgs = an object to send to "new tabber()"
 */
 var
   tempObj, /* Temporary tabber object */
   divs, /* Array of all divs on the page */
   i; /* Loop index */
 if (!tabberArgs) { tabberArgs = {}; }
 /* Create a tabber object so we can get the value of classMain */
 tempObj = new tabberObj(tabberArgs);
 /* Find all DIV elements in the document that have class=tabber */
 /* First get an array of all DIV elements and loop through them */
 divs = document.getElementsByTagName("div");
 for (i=0; i < divs.length; i++) {
   
   /* Is this DIV the correct class? */
   if (divs[i].className &&
 divs[i].className.match(tempObj.REclassMain)) {
     
     /* Now tabify the DIV */
     tabberArgs.div = divs[i];
     divs[i].tabber = new tabberObj(tabberArgs);
   }
 }
 
 return this;

} function tabberAutomaticOnLoad(tabberArgs) {

 /* This function adds tabberAutomatic to the window.onload event,
    so it will run after the document has finished loading.
 */
 var oldOnLoad;
 if (!tabberArgs) { tabberArgs = {}; }
 /* Taken from: http://simon.incutio.ru/archive/2004/05/26/addLoadEvent */
 oldOnLoad = window.onload;
 if (typeof window.onload != "function") {
   window.onload = function() {
     tabberAutomatic(tabberArgs);
   };
 } else {
   window.onload = function() {
     oldOnLoad();
     tabberAutomatic(tabberArgs);
   };
 }

} /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == "undefined") {

   tabberAutomaticOnLoad();

} else {

 if (!tabberOptions["manualStartup"]) {
   tabberAutomaticOnLoad(tabberOptions);
 }

} </script> </head> <body>

Tabber Example

← <a href="http://www.barelyfitz.ru/projects/tabber/">Tabber Home</a>

This example sets a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected. For purposes of example, this page displays an alert to indicate when a cookie is set or retrieved.

Tab 1

Tab 1 content.

Tab 2

Tab 2 content.

Tab 3

Tab 3 content.

</body> </html>

 </source>

Slide tab

   <source lang="html4strict">

<html><head><title>DHTML Calendar</title> <meta name="author" content="Eric Pretorious"> <meta name="subject" content="DHTML Calendar"> <meta name="keywords" content="DHTML, dynamic HTML, crossbrowser, cross-browser, cross browser, javascript, calendar script">

banner {

 position:absolute;
 top:0px;left:0px;
 width:740px;height:110px;
 padding:10px;margin:10px;
 border-bottom:1px solid gray;

}

buttons {

 position:absolute;
 z-index:0;
 top:141px;left:10px;

} .button {

 position:relative;
 width:140px;
 background:#ccffcc;
 border:1px solid #99ff99;
 padding:9px;margin:10px;
 font-family:sans-serif;font-size:10px;

} .badge {

 position:relative;
 width:140px;
 background:transparent;
 padding:10px;margin:10px;
 text-align:center;

} .badge a img {

 border:1px solid white;

}

cover {

 position:absolute;
 z-index:2;
 top:141px;left:191px;
 width:570px;height:450px;
 background:#ccccff;
 border:1px solid #ff9999;
 padding:0;margin:10 8 10 0;
 font-family:sans-serif;font-size:10px;

}

page {

 position:absolute;
 z-index:1;
 top:141px;left:191px;
 width:570px;height:450px;
 background:#ccccff;
 border:1px solid #9999ff;
 padding:0;margin:10 8 10 0;
 font-family:sans-serif;font-size:10px;

} .container {

 position:absolute;
 width:550px;
 background:transparent;
 border-bottom:1px solid gray;
 padding-bottom:10px;margin:10px;

} .container .title {

 font-weight:600;
 font-size:11px;
 padding:0;margin:0;

} .container .content {

 font-weight:400;
 font-size:10px;
 line-height:18px;

} .code_ref {

 position:relative;
 display:block;
 border:1px solid #9999ff;
 background:white;
 padding:10px;
 margin:5 0 5 0;

} </style>

DHTMLC {

 position:relative;
 margin:0 0 10 10;
 height:180px;width:230px;
 visibility:hidden;
 font-family:verdana, arial, sans-serif;font-size:10px;
 line-height:18px;
 background-color:white;border:1px solid #9999ff;

} .months {

 position:absolute;
 height :18px;width:45px;
 text-align:center;background-color:#ccccff;

} .dotw {

 position:absolute;
 height :18px;width:28px;
 text-align:center;background-color:#ccccff;

} .days {

 position:absolute;
 height :18px;width:28px;
 text-align:center;background-color:white;

} .days a:link {

 text-decoration:none;

}

moniker {

 height:18px;width:210px;
 text-align:center;color:#ccc;
 font-family:verdana, arial, sans-serif;font-size:7px;
 line-height:9px;

}

moniker a:link {

 color:gray;

} </style>

* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru
* Copyright (c) 2002 Michael Foster (mike@cross-browser.ru)
* Distributed under the terms of the GNU LGPL from gnu.org

/

 this.contains=this.left=this.top=this.offsetLeft=this.offsetTop=this.pageX=this.pageY=this.zIndex=_retZero;
 this.show=this.hide=this.moveTo=this.moveBy=this.sizeTo=this.sizeBy=this.resizeTo=this.resizeBy=_retVoid;
 this.visibility=this.color=this.background=this.clip=this.innerHtml=_retEStr;
 if (cbeAll.length < 2){this.width=cbeInnerWidth; this.height=cbeInnerHeight; this.scrollLeft=cbePageXOffset; this.scrollTop=cbePageYOffset;}
 else{this.width=this.height=this.scrollLeft=this.scrollTop=_retZero;}
 this.id=""; this.index=cbeAll.length; cbeAll[this.index]=this; this.w=this.h=0; this.x=this.y=0;
 if (window.cbeEventJsLoaded) this.listeners=new Array();

} function cbeBindElement(cbe, ele){

 if (!cbe || !ele) return;
 cbe.ele=ele; cbe.ele.cbe=cbe; cbe.parentElement=cbeGetParentElement(ele);
 if (ele==window){cbe.id=ele.id=cbeWindowId; return;} else if (ele==document){cbe.id=ele.id=cbeDocumentId; return;} else{cbe.id=ele.id;}
 if (_def(ele.clip)){cbe.w=ele.clip.width; cbe.h=ele.clip.height;}
 var css=_def(ele.style);
 // left, top
 cbe.moveTo=_cbeMoveTo; cbe.moveBy=_cbeMoveBy; if (css && _def(ele.style.left, ele.style.top) && typeof(ele.style.left)=="string"){cbe.left=_domLeft; cbe.top=_domTop;}else if (css && _def(ele.style.pixelLeft, ele.style.pixelTop)){cbe.left=_ieLeft; cbe.top=_ieTop;}else if (_def(ele.left, ele.top)){cbe.left=_nnLeft; cbe.top=_nnTop;}else{_sup(false,"left","top","moveTo","moveBy");}
 // width, height
 cbe.sizeTo=_cbeSizeTo; cbe.sizeBy=_cbeSizeBy; cbe.resizeTo=_cbeResizeTo; cbe.resizeBy=_cbeResizeBy; if (css && _def(ele.style.width, ele.style.height, ele.offsetWidth, ele.offsetHeight) && typeof(ele.style.width)=="string"){cbe.width=_domWidth; cbe.height=_domHeight;}else if (css && _def(ele.style.pixelWidth, ele.style.pixelHeight)){cbe.width=_ieWidth; cbe.height=_ieHeight;}else if (_def(ele.clip) && _def(ele.clip.width, ele.clip.height)){cbe.width=_nnWidth; cbe.height=_nnHeight;}else{_sup(false, "width","height","sizeTo","sizeBy","resizeTo","resizeBy");}
 // zIndex
 if (css && _def(ele.style.zIndex)){cbe.zIndex=_domZIndex;} else if (_def(ele.zIndex)){cbe.zIndex=_nnZIndex;} else{_sup(false,"zIndex");}
 // visibility
 cbe.show=_cbeShow; cbe.hide=_cbeHide; if (css && _def(ele.style.visibility)){cbe.visibility=_domVisibility;} else if (_def(ele.visibility)){cbe.visibility=_nnVisibility;} else{_sup(false,"visibility","show","hide");}
 // background
 if (css && _def(ele.style.backgroundColor, ele.style.backgroundImage)){cbe.background=_domBackground;} else if (_def(ele.bgColor, ele.background)){cbe.background=_nnBackground;} else{_sup(false,"background");}
 // color
 if (css && _def(ele.style.color)){cbe.color=_domColor;} else{_sup(false,"color");}
 // clip
 if (css && _def(ele.style.clip)){cbe.clip=_domClip;} else if (_def(ele.clip)){cbe.clip=_nnClip;} else{_sup(false,"clip");}
 // offsetLeft, offsetTop
 if (_def(ele.offsetLeft, ele.offsetTop, ele.offsetParent)){cbe.offsetLeft=_ieOffsetLeft; cbe.offsetTop=_ieOffsetTop;}else if (_def(ele.pageX, ele.pageY)){cbe.offsetLeft=_nnOffsetLeft; cbe.offsetTop=_nnOffsetTop;}else{_sup(false,"offsetLeft","offsetTop");}
 // pageX, pageY
 cbe.contains=_cbeContains; if (_def(ele.pageX, ele.pageY)){cbe.pageX=_nnPageX; cbe.pageY=_nnPageY;}else if (document.cbe.isSupported("offsetLeft")){cbe.pageX=_cbePageX; cbe.pageY=_cbePageY;}else{_sup(false,"pageX","pageY","contains");}
 // innerHtml
 if (_def(ele.innerHTML)){cbe.innerHtml=_ieInnerHtml;} else if (_def(ele.document) && _def(ele.document.write)){cbe.innerHtml=_nnInnerHtml;} else{_sup(false,"innerHtml");}
 // scrollLeft, scrollTop
 if (_def(ele.scrollLeft, ele.scrollTop)){cbe.scrollLeft=_cbeScrollLeft; cbe.scrollTop=_cbeScrollTop;}else{_sup(false,"scrollLeft","scrollTop");}
 // createElement, appendChild, removeChild (these need more work)
 if (!_def(document.createElement) && !document.layers){_sup(false,"createElement","appendChild","removeChild");}else{if (!_def(ele.appendChild)){_sup(false,"appendChild");} if (!_def(ele.removeChild)){_sup(false,"removeChild");}}

} function cbeInitialize(sTagNames){

 var t,i,ele,eleList,cbe;
 cbe=new CrossBrowserElement(window);
 cbeBindElement(cbe, window);
 cbe=new CrossBrowserElement(document);
 cbeBindElement(cbe, document);
 if (!document.getElementById) document.getElementById=cbeGetElementById;
 if (document.createElement || document.layers) document.cbe.createElement=_cbeCreateElement;
 document.cbe.isSupported=_cbeIsSupported;
 document.cbe.supported=new Array();
 _sup(true,"left","top","width","height","zIndex","show","hide","visibility","background","color","clip","offsetLeft","offsetTop","pageX","pageY","innerHtml","scrollLeft","scrollTop","createElement","appendChild","removeChild","moveTo","moveBy","sizeTo","sizeBy","resizeTo","resizeBy","contains");
 for (t=0; t < arguments.length; ++t){
   eleList=cbeGetElementsByTagName(arguments[t]);
   for (i=0; i < eleList.length; ++i){
     ele=eleList[i];
     if ( ele.id && ele.id !=""){
       cbe=new CrossBrowserElement();
       cbeBindElement(cbe, ele);
    }
  }
   if (document.layers) break;
}
 _cbeCreateTree();
 if (window.cbeEventJsLoaded && (document.layers || is.opera5or6)){window.cbe.addEventListener("resize", cbeDefaultResizeListener);}

} function _cbeIsSupported(sMethods){var i; for (i=0; i<arguments.length; ++i){if (!document.cbe.supported[arguments[i]]) return false;}return true;} function _sup(bValue, sMethods){var i; for (i=1; i<arguments.length; ++i) document.cbe.supported[arguments[i]]=bValue;} function _cbeCreateTree(){var parent; for (var i=1; i < cbeAll.length; ++i){parent=cbeAll[i].parentElement; if (!parent.cbe){while (parent && !parent.cbe){parent=cbeGetParentElement(parent);}if (!parent) parent=document;}parent.cbe.appendNode(cbeAll[i]);}} function cbeGetElementById(sId){var ele=null; if (sId==window.cbeWindowId) ele=window; else if (sId==window.cbeDocumentId) ele=document; else if (is.dom1getbyid) ele=document.getElementById(sId); else if (document.all) ele=document.all[sId]; else if (document.layers) ele=nnGetElementById(sId); if (!ele && window.cbeUtilJsLoaded){ele=cbeGetImageByName(sId); if (!ele){ele=cbeGetFormByName(sId);}} return ele;} function nnGetElementById(sId){for (var i=0; i < cbeAll.length; i++){if ( cbeAll[i].id==sId ) return cbeAll[i].ele;}return null;} function cbeGetElementsByTagName(sTagName){

 var eleList;
 if (document.getElementsByTagName) eleList=document.getElementsByTagName(sTagName); // standard
 else if (document.body && document.body.getElementsByTagName) eleList=document.body.getElementsByTagName(sTagName); // opera5or6
 else if (document.all && document.all.tags) eleList=document.all.tags(sTagName); // ie4
 else if (document.layers){eleList=new Array(); nnGetAllLayers(window, eleList, 0);}// nn4
 return eleList;

} function nnGetAllLayers(parent, layerArray, nextIndex){

 var i, layer;
 for (i=0; i < parent.document.layers.length; i++){
   layer=parent.document.layers[i]; layerArray[nextIndex++]=layer;
   if (layer.document.layers.length) nextIndex=nnGetAllLayers(layer, layerArray, nextIndex);
}
 return nextIndex;

} function cbeGetParentElement(child){

 var parent=document;
 if (child==window) parent=null;
 else if (child==document) parent=window;
 else if (child.parentLayer){if (child.parentLayer !=window) parent=child.parentLayer;}
 else{
   if (child.parentNode) parent=child.parentNode;
   else if (child.offsetParent) parent=child.offsetParent;
   else if (child.parentElement) parent=child.parentElement;
}
 return parent;

} function _def(){var i; for (i=0; i<arguments.length; ++i){if (typeof(arguments[i])=="" || typeof(arguments[i])=="undefined") return false;}return true;} function _retZero(){return 0;} function _retNull(){return null;} function _retEStr(){return "";} function _retVoid(){} ////// when optimizing, don"t remove anything above this comment ////// function _cbeCreateElement(sEleType){// returns an Element object

 var ele=null;
 if (document.createElement && sEleType.length){
   ele=document.createElement(sEleType);
   if (ele && ele.style){ele.style.position="absolute";}
}
 else if (document.layers){
   ele=new Object();
}
 return ele;

} CrossBrowserNode.prototype.appendChild=function(eleChild){// returns the appended Element object on success

 var cbe, ele, rv=null;
 if (document.layers){
   var thisEle;
   if (this.index < 2) thisEle=window;
   else thisEle=this.ele;
   ele=new Layer(this.width(), thisEle);
   if (ele){
     if (eleChild.id) ele.id=ele.name=eleChild.id;
     cbe=new CrossBrowserElement();
     cbeBindElement(cbe, ele);
     this.appendNode(ele.cbe);
     eleChild.cbe=cbe;
     ++this.childNodes;
     rv=ele;
  }
}
 else{
   if (this.index < 2) ele=document.body;
   else ele=this.ele;
   if (ele.appendChild){
     ele.appendChild(eleChild);
     cbe=new CrossBrowserElement();
     cbeBindElement(cbe, eleChild);
     this.appendNode(eleChild.cbe);
     ++this.childNodes;
     rv=eleChild;
  }
}
 return rv;

} CrossBrowserNode.prototype.removeChild=function(eleChild){

 var ele, rv=null;
 if (this.index < 2) ele=document.body;
 else ele=this.ele;
 if (ele.removeChild || document.layers){
   --this.childNodes;
   var prevSib=eleChild.cbe.previousSibling;
   var nextSib=eleChild.cbe.nextSibling;
   with (eleChild.cbe){
     parentNode=null;
     previousSibling=null;
     nextSibling=null;
  }
   if (prevSib) prevSib.nextSibling=nextSib;
   else this.firstChild=nextSib;
   if (nextSib) nextSib.previousSibling=prevSib;
   else this.lastChild=prevSib;
   if (document.layers){
     //// working on it
  }
   else{
     ele.removeChild(eleChild);
  }
   rv=eleChild;
}
 return rv;

} function _cbeContains(iLeft, iTop, iClipTop, iClipRight, iClipBottom, iClipLeft){if (arguments.length==2){iClipTop=iClipRight=iClipBottom=iClipLeft=0;} else if (arguments.length==3){iClipRight=iClipBottom=iClipLeft=iClipTop;} else if (arguments.length==4){iClipLeft=iClipRight; iClipBottom=iClipTop;} var thisX=this.pageX(), thisY=this.pageY(); return ( iLeft >=thisX + iClipLeft && iLeft <=thisX + this.width() - iClipRight && iTop >=thisY + iClipTop && iTop <=thisY + this.height() - iClipBottom );} function _cbeMoveTo(x_cr, y_mar, outside, xEndL){if (isFinite(x_cr)){this.left(x_cr); this.top(y_mar);}else{this.cardinalPosition(x_cr, y_mar, outside); this.left(this.x); this.top(this.y);}if (xEndL) cbeEval(xEndL, this);} function _cbeMoveBy(uDX, uDY, xEndL){if (uDX){this.left(this.left() + uDX);} if (uDY){this.top(this.top() + uDY);} if (xEndL){cbeEval(xEndL, this);}} function _domLeft(iX){if (arguments.length){this.ele.style.left=iX + "px";} else{iX=parseInt(this.ele.style.left); if (isNaN(iX)) iX=0;}return iX;} function _ieLeft(iX){if (arguments.length){this.ele.style.pixelLeft=iX;} else{iX=this.ele.style.pixelLeft;} return iX;} function _nnLeft(iX){if (arguments.length){this.ele.left=iX;} else{iX=this.ele.left;} return iX;} function _domTop(iY){if (arguments.length){this.ele.style.top=iY + "px";} else{iY=parseInt(this.ele.style.top); if (isNaN(iY)) iY=0;}return iY;} function _ieTop(iY){if (arguments.length){this.ele.style.pixelTop=iY;} else{iY=this.ele.style.pixelTop;} return iY;} function _nnTop(iY){if (arguments.length){this.ele.top=iY;} else{iY=this.ele.top;} return iY;} function _nnOffsetLeft(){var ol=this.ele.pageX - this.parentElement.pageX; if (isNaN(ol)){ol=this.ele.pageX;} return ol;} function _nnOffsetTop(){var ot=this.ele.pageY - this.parentElement.pageY; if (isNaN(ot)){ot=this.ele.pageY;} return ot;} function _ieOffsetLeft(){var x=this.ele.offsetLeft, parent=this.ele.offsetParent; while(parent && !parent.cbe){x +=parent.offsetLeft; parent=parent.offsetParent;}return x;} function _ieOffsetTop(){var y=this.ele.offsetTop, parent=this.ele.offsetParent; while(parent && !parent.cbe){y +=parent.offsetTop; parent=parent.offsetParent;}return y;} function _nnPageX(){return this.ele.pageX;} function _nnPageY(){return this.ele.pageY;} function _cbePageX(){var x=this.offsetLeft(), parent=this.parentNode; if (parent){while(parent.index > 1){x +=parent.offsetLeft(); parent=parent.parentNode;}} return x;} function _cbePageY(){var y=this.offsetTop(), parent=this.parentNode; if (parent){while(parent.index > 1){y +=parent.offsetTop(); parent=parent.parentNode;}} return y;} function _cbeSizeTo(uW, uH){this.width(uW); this.height(uH);} function _cbeSizeBy(iDW, iDH){this.width(this.width() + iDW); this.height(this.height() + iDH);} function _cbeResizeTo(uW, uH, xEndListener){this.sizeTo(uW, uH); this.clip("auto"); cbeEval(xEndListener, this);} function _cbeResizeBy(iDW, iDH, xEndListener){this.sizeBy(iDW, iDH); this.clip("auto"); cbeEval(xEndListener, this);} function _domWidth(uW){if (arguments.length){uW=Math.round(uW); _domSetWidth(this.ele, uW);}return this.ele.offsetWidth;} function _ieWidth(uW){if (arguments.length){uW=Math.round(uW); this.ele.style.pixelWidth=uW;}return this.ele.style.pixelWidth;} function _nnWidth(uW){if (arguments.length){this.w=Math.round(uW); this.ele.clip.right=this.w;}return this.w;} function _domHeight(uH){if (arguments.length){uH=Math.round(uH); _domSetHeight(this.ele, uH);}return this.ele.offsetHeight;} function _ieHeight(uH){if (arguments.length){uH=Math.round(uH); this.ele.style.pixelHeight=uH;}return this.ele.style.pixelHeight;} function _nnHeight(uH){if (arguments.length){this.h=Math.round(uH); this.ele.clip.bottom=this.h;}return this.h;} function _domSetWidth(ele,uW){

 if (uW < 0) return;
 var pl=0,pr=0,bl=0,br=0;
 if (_def(document.defaultView) && _def(document.defaultView.getComputedStyle)){// gecko and standard
   pl=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-left"));
   pr=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-right"));
   bl=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-left-width"));
   br=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-right-width"));
}
 else if (_def(ele.currentStyle, document.rupatMode)){
   if (document.rupatMode=="CSS1Compat"){// ie6up in css1compat mode
     pl=parseInt(ele.currentStyle.paddingLeft);
     pr=parseInt(ele.currentStyle.paddingRight);
     bl=parseInt(ele.currentStyle.borderLeftWidth);
     br=parseInt(ele.currentStyle.borderRightWidth);
  }
}
 if (isNaN(pl)) pl=0; if (isNaN(pr)) pr=0; if (isNaN(bl)) bl=0; if (isNaN(br)) br=0;
 var cssW=uW-(pl+pr+bl+br);
 if (isNaN(cssW) || cssW < 0) return;
 ele.style.width=cssW + "px";

} function _domSetHeight(ele,uH){

 if (uH < 0) return;
 var pt=0,pb=0,bt=0,bb=0;
 if (_def(document.defaultView) && _def(document.defaultView.getComputedStyle)){
   pt=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-top"));
   pb=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("padding-bottom"));
   bt=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-top-width"));
   bb=parseInt(document.defaultView.getComputedStyle(ele, "").getPropertyValue("border-bottom-width"));
}
 else if (_def(ele.currentStyle, document.rupatMode)){
   if (document.rupatMode=="CSS1Compat"){
     pt=parseInt(ele.currentStyle.paddingTop);
     pb=parseInt(ele.currentStyle.paddingBottom);
     bt=parseInt(ele.currentStyle.borderTopWidth);
     bb=parseInt(ele.currentStyle.borderBottomWidth);
  }
}
 if (isNaN(pt)) pt=0; if (isNaN(pb)) pb=0; if (isNaN(bt)) bt=0; if (isNaN(bb)) bb=0;
 var cssH=uH-(pt+pb+bt+bb);
 if (isNaN(cssH) || cssH < 0) return;
 ele.style.height=cssH + "px";

} function _cbeScrollLeft(){return this.ele.scrollLeft;} function _cbeScrollTop(){return this.ele.scrollTop;} function _cbeShow(){this.visibility(1);} function _cbeHide(){this.visibility(0);} function _domVisibility(vis){if (arguments.length){if (vis){this.ele.style.visibility="inherit";} else{this.ele.style.visibility="hidden";}}else return (this.ele.style.visibility=="visible" || this.ele.style.visibility=="inherit" || this.ele.style.visibility=="");} function _nnVisibility(vis){if (arguments.length){if (vis){this.ele.visibility="inherit";} else{this.ele.visibility="hide";}}else return (this.ele.visibility=="show" || this.ele.visibility=="inherit" || this.ele.visibility=="");} function _domZIndex(uZ){if (arguments.length){this.ele.style.zIndex=uZ;} else{uZ=parseInt(this.ele.style.zIndex); if (isNaN(uZ)) uZ=0;}return uZ;} function _nnZIndex(uZ){if (arguments.length) this.ele.zIndex=uZ; return this.ele.zIndex;} function _domBackground(sColor, sImage){if (arguments.length){if (!sColor){sColor="transparent";} this.ele.style.backgroundColor=sColor; if (arguments.length==2){this.ele.style.backgroundImage="url(" + sImage + ")";}}else return this.ele.style.backgroundColor;} function _nnBackground(sColor, sImage){if (arguments.length){if (sColor=="transparent"){sColor=null;} this.ele.bgColor=sColor; if (arguments.length==2){this.ele.background.src=sImage || null;}}else{var bg=this.ele.bgColor; if (window.cbeUtilJsLoaded){bg=cbeHexString(bg,6,"#");} return bg;}} function _domColor(newColor){if (arguments.length){this.ele.style.color=newColor;}else return this.ele.style.color;} function _domClip(iTop, iRight, iBottom, iLeft){if (arguments.length==4){var clipRect="rect(" + iTop + "px " + iRight + "px " + iBottom + "px " + iLeft + "px" + ")"; this.ele.style.clip=clipRect;}else{this.clip(0, this.ele.offsetWidth, this.ele.offsetHeight, 0);}} function _nnClip(iTop, iRight, iBottom, iLeft){if (arguments.length==4){this.ele.clip.top=iTop; this.ele.clip.right=iRight; this.ele.clip.bottom=iBottom; this.ele.clip.left=iLeft;}else{this.clip(0, this.width(), this.height(), 0);}} function _ieInnerHtml(sHtml){if (arguments.length){this.ele.innerHTML=sHtml;}else return this.ele.innerHTML;} function _nnInnerHtml(sHtml){if (arguments.length){if (sHtml==""){sHtml=" ";} this.ele.document.open(); this.ele.document.write(sHtml); this.ele.document.close();}else return "";} CrossBrowserElement.prototype.cardinalPosition=function(cp, margin, outside){

 if (typeof(cp) !="string"){window.status="cardinalPosition() error: cp=" + cp + ", id=" + this.id; return;}
 var x=this.left(), y=this.top(), w=this.width(), h=this.height();
 var pw=this.parentNode.width(), ph=this.parentNode.height();
 var sx=this.parentNode.scrollLeft(), sy=this.parentNode.scrollTop();
 var right=sx + pw, bottom=sy + ph;
 var cenLeft=sx + Math.floor((pw-w)/2), cenTop=sy + Math.floor((ph-h)/2);
 if (!margin) margin=0;
 else{
   if (outside) margin=-margin;
   sx +=margin; sy +=margin; right -=margin; bottom -=margin;
}
 switch (cp.toLowerCase()){
   case "n": x=cenLeft; if (outside) y=sy - h; else y=sy; break;
   case "ne": if (outside){x=right; y=sy - h;}else{x=right - w; y=sy;}break;
   case "e": y=cenTop; if (outside) x=right; else x=right - w; break;
   case "se": if (outside){x=right; y=bottom;}else{x=right - w; y=bottom - h}break;
   case "s": x=cenLeft; if (outside) y=sy - h; else y=bottom - h; break;
   case "sw": if (outside){x=sx - w; y=bottom;}else{x=sx; y=bottom - h;}break;
   case "w": y=cenTop; if (outside) x=sx - w; else x=sx; break;
   case "nw": if (outside){x=sx - w; y=sy - h;}else{x=sx; y=sy;}break;
   case "cen": case "center": x=cenLeft; y=cenTop; break;
   case "cenh": x=cenLeft; break;
   case "cenv": y=cenTop; break;
}
 this.x=x; this.y=y;

} function cbeInnerWidth(){

 var w=0;
 if (is.opera5or6){w=window.innerWidth;}
 else if (is.ie && document.documentElement && document.documentElement.clientWidth) w=document.documentElement.clientWidth; // ie6 compat mode
 else if (document.body && document.body.clientWidth) w=document.body.clientWidth; // ie4up and gecko
 else if (_def(window.innerWidth,window.innerHeight,document.height)){// nn4
   w=window.innerWidth;
   if (document.height > window.innerHeight) w -=16;
}
 return w;

} function cbeInnerHeight(){

 var h=0;
 if (is.opera5or6){h=window.innerHeight;}
 else if (is.ie && document.documentElement && document.documentElement.clientHeight) h=document.documentElement.clientHeight;
 else if (document.body && document.body.clientHeight) h=document.body.clientHeight;
 else if (_def(window.innerWidth,window.innerHeight,document.width)){
   h=window.innerHeight;
   if (document.width > window.innerWidth) h -=16;
}
 return h;

} function cbePageXOffset(){

 var offset=0;
 if (_def(window.pageXOffset)) offset=window.pageXOffset; // gecko, nn4, opera
 else if (document.documentElement && document.documentElement.scrollLeft) offset=document.documentElement.scrollLeft; // ie6 compat mode
 else if (document.body && _def(document.body.scrollLeft)) offset=document.body.scrollLeft; // ie4up
 return offset;

} function cbePageYOffset(){

 var offset=0;
 if (_def(window.pageYOffset)) offset=window.pageYOffset;
 else if (document.documentElement && document.documentElement.scrollTop) offset=document.documentElement.scrollTop;
 else if (document.body && _def(document.body.scrollTop)) offset=document.body.scrollTop;
 return offset;

} function cbeEval(exp, arg1, arg2, arg3, arg4, arg5, arg6){

 if (typeof(exp)=="function") exp(arg1, arg2, arg3, arg4, arg5, arg6);
 else if (typeof(exp)=="object" && typeof(arg1)=="function") {
   exp._cbeEval_ = arg1;
   exp._cbeEval_(arg2, arg3, arg4, arg5, arg6);
 }  
 else if (typeof(exp)=="string") eval(exp);

} function ClientSnifferJr(){

 this.ua=navigator.userAgent.toLowerCase();
 this.major=parseInt(navigator.appVersion);
 this.minor=parseFloat(navigator.appVersion);
 if (document.addEventListener && document.removeEventListener) this.dom2events=true;
 if (document.getElementById) this.dom1getbyid=true;
 if (window.opera){
   this.opera=true;
   this.opera5=(this.ua.indexOf("opera 5") !=-1 || this.ua.indexOf("opera/5") !=-1);
   this.opera6=(this.ua.indexOf("opera 6") !=-1 || this.ua.indexOf("opera/6") !=-1);
   this.opera5or6=this.opera5 || this.opera6;
   this.opera7=(this.ua.indexOf("opera 7") !=-1 || this.ua.indexOf("opera/7") !=-1);
   return;
}
 this.konq=this.ua.indexOf("konqueror") !=-1;
 this.ie=this.ua.indexOf("msie") !=-1;
 if (this.ie){
   this.ie3=this.major < 4;
   this.ie4=(this.major==4 && this.ua.indexOf("msie 5")==-1 && this.ua.indexOf("msie 6")==-1);
   this.ie4up=this.major >=4;
   this.ie5=(this.major==4 && this.ua.indexOf("msie 5.0") !=-1);
   this.ie5up=!this.ie3 && !this.ie4;
   this.ie6=(this.major==4 && this.ua.indexOf("msie 6.0") !=-1);
   this.ie6up=(!this.ie3 && !this.ie4 && !this.ie5 && this.ua.indexOf("msie 5.5")==-1);
   return;
}
 this.hotjava=this.ua.indexOf("hotjava") !=-1;
 this.webtv=this.ua.indexOf("webtv") !=-1;
 this.aol=this.ua.indexOf("aol") !=-1;
 if (this.hotjava || this.webtv || this.aol) return;
 // Gecko, NN4, and NS6
 this.gecko=this.ua.indexOf("gecko") !=-1;
 this.nav=(this.ua.indexOf("mozilla") !=-1 && this.ua.indexOf("spoofer")==-1 && this.ua.indexOf("compatible")==-1);
 if (this.nav){
   this.nav4=this.major==4;
   this.nav4up=this.major >=4;
   this.nav5up=this.major >=5;
   this.nav6=this.major==5;
   this.nav6up=this.nav5up;
}

} window.is=new ClientSnifferJr(); // End cbe_core.js </script>

* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru
* Copyright (c) 2002 Michael Foster (mike@cross-browser.ru)
* Distributed under the terms of the GNU LGPL from gnu.org

/

function cbeELReg(eventType, eventListener, eventCapture, listenerObject) { // event listener registration object constructor

 this.type = eventType; this.listener = eventListener; this.capture = eventCapture; this.obj = listenerObject;

} function CrossBrowserEvent(e) { // Object constructor

 // from DOM2 Interface Event
 this.type = "";
 this.target = null;
 this.currentTarget = null;
 this.eventPhase = 0;
 this.bubbles = true;
 this.cancelable = true;
 this.timeStamp = 0;
 this.AT_TARGET = 1; this.BUBBLING_PHASE = 2; this.CAPTURING_PHASE = 3; // eventPhase masks
 // from DOM2 Interface MouseEvent : UIEvent
 this.screenX = 0;
 this.screenY = 0;
 this.clientX = 0;
 this.clientY = 0;
 this.ctrlKey = false;
 this.shiftKey = false;
 this.altKey = false;
 this.metaKey = false;
 this.button = 3; // 3 == undefined
 this.relatedTarget = null;
 this.LEFT = 0; this.MIDDLE = 1; this.RIGHT = 2; // button masks
 // from IE4 Object Model
 this.keyCode = 0;
 this.offsetX = 0;
 this.offsetY = 0;
 // from NN4 Object Model
 this.pageX = 0;
 this.pageY = 0;
 // CBE
 this.stopPropagationFlag = false;
 this.preventDefaultFlag = false;
 this.cbeTarget = window.cbe;
 this.cbeCurrentTarget = window.cbe;
 if (!e) return;
 
 if (e.type) { this.type = e.type; }
 if (e.target) { this.target = e.target; }
 else if (e.srcElement) { this.target = e.srcElement; }
 if (e.currentTarget) { this.currentTarget = e.currentTarget; }
 else if (e.toElement) { this.currentTarget = e.toElement; }
 if (e.eventPhase) { this.eventPhase = e.eventPhase; }
 if (e.bubbles) { this.bubbles = e.bubbles; }
 if (e.cancelable) { this.cancelable = e.cancelable; }
 if (e.timeStamp) { this.timeStamp = e.timeStamp; }
 if (e.screenX) { this.screenX = e.screenX; }
 if (e.screenY) { this.screenY = e.screenY; }
 if (is.opera5or6) { this.clientX = e.clientX - document.cbe.scrollLeft(); }
 else if (e.clientX) { this.clientX = e.clientX; }
 else if (e.pageX) { this.clientX = e.pageX - document.cbe.scrollLeft(); }
 if (is.opera5or6) { this.clientY = e.clientY - document.cbe.scrollLeft(); }
 else if (e.clientY) { this.clientY = e.clientY; }
 else if (e.pageY) { this.clientY = e.pageY - document.cbe.scrollLeft(); }
 if (is.opera5or6) { this.ctrlKey = e.type=="mousemove" ? e.shiftKey : e.ctrlKey; }
 else if (_def(e.ctrlKey)) { this.ctrlKey = e.ctrlKey; }
 else if (_def(e.modifiers) && window.Event) { this.ctrlKey = (e.modifiers & window.Event.CONTROL_MASK) != 0; }
 if (is.opera5or6) { this.shiftKey = e.type=="mousemove" ? e.ctrlKey : e.shiftKey; }
 else if (_def(e.shiftKey)) { this.shiftKey = e.shiftKey; }
 else if (_def(e.modifiers) && window.Event) { this.shiftKey = (e.modifiers & Event.SHIFT_MASK) != 0; }
 if (e.altKey) { this.altKey = e.altKey; }
 else if (_def(e.modifiers) && window.Event) { this.altKey = (e.modifiers & Event.ALT_MASK) != 0; }
 if (e.metaKey) { this.metaKey = e.metaKey; }
 // button (?)
 if (is.ie) { 
   if (this.type.indexOf("mouse") != -1) {
     if (e.button == 1) this.button = this.LEFT;
     else if (e.button == 4) this.button = this.MIDDLE;
     else if (e.button == 2) this.button = this.RIGHT;
   }
   else if (this.type == "click") this.button = this.LEFT;
   else this.button = 4; // non-mouse event
 }
 else if (_def(e.button)) { // standard
   if (this.type.indexOf("mouse") != -1) { this.button = e.button; if (this.button < 0 || this.button > 2) {this.button = 3;} }
   else if (this.type == "click") this.button = this.LEFT;
   else this.button = 4; // non-mouse event
 }  
 else if (_def(e.which)) {
   if (document.layers) { // nn4
     if (this.type.indexOf("mouse") != -1) { this.button = e.which - 1; if (this.button < 0 || this.button > 2) {this.button = 3;} }
     else if (this.type == "click") this.button = this.LEFT;
     else this.button = 4; // non-mouse event
   }
   else { // opera5or6
     if ((e.type == "click" && e.which == 0) || ((e.type == "mousedown" || e.type == "mouseup") && e.which == 1)) {this.button = this.LEFT;}
   }
 }
 if (e.relatedTarget) { this.relatedTarget = e.relatedTarget; }
 else if (e.fromElement) { this.relatedTarget = e.fromElement; } // ? may need to be toElement in some cases ?
 if (_def(e.which)) { this.keyCode = e.which; }
 else if (_def(e.keyCode)) { this.keyCode = e.keyCode; }
 var calcOfs = false;
 if (_def(e.layerX,e.layerY)) { this.offsetX = e.layerX; this.offsetY = e.layerY; }
 else calcOfs = true; // calculate it below
 if (is.opera5or6) { this.pageX = e.clientX; this.pageY = e.clientY; }
 else if (_def(e.pageX,e.pageY)) { this.pageX = e.pageX; this.pageY = e.pageY; }
 else {
   this.pageX = this.clientX + document.cbe.scrollLeft();
   this.pageY = this.clientY + document.cbe.scrollTop();
 }
 
 // Find the CBE event target
 if (document.layers) {
   this.cbeTarget = cbeGetNodeFromPoint(this.pageX, this.pageY);
   // NN4 note: mouseout works only if mouseover and mouseout are both added to the same object
   if (this.type == "mouseover") cbeMOT = this.cbeTarget;
   else if (this.type == "mouseout") this.cbeTarget = cbeMOT || document.cbe;
 }
 else { var target = this.target; while (!target.cbe) {target = cbeGetParentElement(target);} this.cbeTarget = target.cbe; }
 this.cbeCurrentTarget = this.cbeTarget;
 if (calcOfs) { this.offsetX = this.pageX - this.cbeTarget.pageX(); this.offsetY = this.pageY - this.cbeTarget.pageY(); }

} CrossBrowserElement.prototype.addEventListener = function(eventType, eventListener, useCapture, listenerObject) {

 if (!useCapture) useCapture = false;
 eventType = eventType.toLowerCase();
 if (
   (eventType.indexOf("mouse") != -1)
   || eventType == "click"
   || (eventType.indexOf("key") != -1)

/* || (eventType.indexOf("resize") != -1 && !is.nav4 && !is.opera)

   || (eventType.indexOf("scroll") != -1 && !is.nav && !is.opera) */
 ) {
   var add=true;
   for (var i=0; i < this.listeners.length; ++i) { if (eventType == this.listeners[i].type) {add=false; break;} }
   if (add) {
     cbeNativeAddEventListener(this.ele, eventType, cbePropagateEvent, false);
   }
   this.listeners[this.listeners.length] = new cbeELReg(eventType, eventListener, useCapture, listenerObject);
   return;
 }
 switch(eventType) {
   case "slidestart": this.onslidestart = eventListener; return;
   case "slide": this.onslide = eventListener; return;
   case "slideend": this.onslideend = eventListener; return;
   case "dragstart": this.ondragstart = eventListener; return;
   case "drag":
     this.ondragCapture = useCapture;
     this.ondrag = eventListener;
     this.addEventListener("mousedown", cbeDragStartEvent, useCapture);
     return;
   case "dragend": this.ondragend = eventListener; return;
   case "dragresize": if (window.cbeUtilJsLoaded) cbeAddDragResizeListener(this); return;
   case "scroll":
     if (is.nav || is.opera) {
       window.cbeOldScrollTop = cbePageYOffset();
       window.cbeOnScrollListener = eventListener;
       cbeScrollEvent();
       return;
     }
     break;
   case "resize":
     if (is.nav4 || is.opera) {
       window.cbeOldWidth = cbeInnerWidth();
       window.cbeOldHeight = cbeInnerHeight();
       window.cbeOnResizeListener = eventListener;
       cbeResizeEvent();
       return;
     }
     break;
 } // end switch
 cbeNativeAddEventListener(this.ele, eventType, eventListener, useCapture);

} function cbeNativeAddEventListener(ele, eventType, eventListener, useCapture) {

 if (!useCapture) useCapture = false;
 eventType = eventType.toLowerCase();
 var eh = "ele.on" + eventType + "=eventListener";
 if (ele.addEventListener) {
   ele.addEventListener(eventType, eventListener, useCapture);
 }
 else if (ele.captureEvents) {

// if (useCapture || (eventType.indexOf("mousemove")!=-1)) // ???

     ele.captureEvents(eval("Event." + eventType.toUpperCase()));
   eval(eh);
 }
 else { eval(eh); }

} function cbeNativeRemoveEventListener(ele, eventType, eventListener, useCapture) {

 if (!useCapture) useCapture = false;
 eventType = eventType.toLowerCase();
 var eh = "ele.on" + eventType + "=null";
 if (ele.removeEventListener) {
   ele.removeEventListener(eventType, eventListener, useCapture);
 }
 else if (ele.releaseEvents) {

// if (useCapture || (eventType.indexOf("mousemove")!=-1)) // ???

     ele.releaseEvents(eval("Event." + eventType.toUpperCase()));
   eval(eh);
 }
 else { eval(eh); }

} CrossBrowserElement.prototype.removeEventListener = function(eventType, eventListener, useCapture) {

 eventType = eventType.toLowerCase();
 if (!useCapture) useCapture = false;
 if ((eventType.indexOf("mouse") != -1) || eventType == "click" || (eventType.indexOf("key") != -1)) {
   var i;
   for (i = 0; i < this.listeners.length; ++i) {
     if (this.listeners[i].type == eventType && this.listeners[i].listener == eventListener && this.listeners[i].capture == useCapture) {
       if (this.listeners.splice) this.listeners.splice(i, 1);
       else this.listeners[i].type = "*";
       break;
     }
   }
   var remove=true;
   for (i = 0; i < this.listeners.length; ++i) { if (eventType == this.listeners[i].type) { remove = false; break; } }
   if (remove) cbeNativeRemoveEventListener(this.ele, eventType, cbePropagateEvent, false);
   return;
 }
 switch(eventType) {
   case "slidestart": this.onslidestart = null; return;
   case "slide": this.onslide = null; return;
   case "slideend": this.onslideend = null; return;
   case "dragstart": this.ondragstart = null; return;
   case "drag":
     this.removeEventListener("mousedown", cbeDragStartEvent, this.ondragCapture);
     this.ondrag = null;
     return;
   case "dragend": this.ondragend = null; return;
   case "dragresize": if (window.cbeUtilJsLoaded) cbeRemoveDragResizeListener(this); return;
   case "scroll":
     if (is.nav || is.opera) {
       window.cbeOnScrollListener = null;
       return;
     }
     break;
   case "resize":
     if (is.nav4 || is.opera) {
       window.cbeOnResizeListener = null;
       return;
     }
     break;
 } // end switch
 cbeNativeRemoveEventListener(this.ele, eventType, eventListener, useCapture);

} CrossBrowserEvent.prototype.stopPropagation = function() { this.stopPropagationFlag = true; } CrossBrowserEvent.prototype.preventDefault = function() { this.preventDefaultFlag = true; } CrossBrowserElement.prototype.dispatchEvent= function(e) {

 var dispatch;
 e.cbeCurrentTarget = this;
 for (var i=0; i < this.listeners.length; ++i) {
   dispatch = false;
   if (e.type == this.listeners[i].type) {
     if (e.eventPhase == e.CAPTURING_PHASE) {
       if (this.listeners[i].capture) dispatch = true;
     }
     else if (!this.listeners[i].capture) dispatch = true;
   }
   if (dispatch) {
     if (this.listeners[i].obj) cbeEval(this.listeners[i].obj, this.listeners[i].listener, e);
     else cbeEval(this.listeners[i].listener, e);
   }
 }

} function cbePropagateEvent(evt) {

 var i=0, e=null, a=new Array();
 if (evt) e = new CrossBrowserEvent(evt);
 else if (window.event) e = new CrossBrowserEvent(window.event);
 else return;
 // Create an array of EventTargets, following the parent chain up (does not include cbeTarget)
 var node = e.cbeTarget.parentNode;
 while(node) {
   a[i++] = node;
   node = node.parentNode;
 }
 // The capturing phase
 e.eventPhase = e.CAPTURING_PHASE;
 for (i = a.length-1; i>=0; --i) {
   a[i].dispatchEvent(e);
   if (e.stopPropagationFlag) break;
 }
 // The at-target phase
 if (!e.stopPropagationFlag) {
   e.eventPhase = e.AT_TARGET;
   e.cbeTarget.dispatchEvent(e);
   // The bubbling phase
   if (!e.stopPropagationFlag && e.bubbles) {
     e.eventPhase = e.BUBBLING_PHASE;
     for (i = 0; i < a.length; ++i) {
       a[i].dispatchEvent(e);
       if (e.stopPropagationFlag) break;
     }
   }
 }
 //  Don"t allow native bubbling
 if (is.ie) window.event.cancelBubble = true;
 else if (is.gecko) evt.stopPropagation();
 // Allow listener to cancel default action
 if (e.cancelable && e.preventDefaultFlag) {
   if (is.gecko || is.opera) evt.preventDefault();
   return false;
 }
 else return true;

} function cbeGetNodeFromPoint(x, y) {

 var hn /* highNode */, hz=0 /* highZ */, cn /* currentNode */, cz /* currentZ */;
 hn = document.cbe;
 while (hn.firstChild && hz >= 0) {
   hz = -1;
   cn = hn.firstChild;
   while (cn) {
     if (cn.contains(x, y)) {
       cz = cn.zIndex();
       if (cz >= hz) {
         hn = cn;
         hz = cz;
       }
     }
     cn = cn.nextSibling;
   }
 }
 return hn;

} function cbeScrollEvent() {

 if (!window.cbeOnScrollListener) { return; }
 if (cbePageYOffset() != window.cbeOldScrollTop) {
   cbeEval(window.cbeOnScrollListener);
   window.cbeOldScrollTop = cbePageYOffset();
 }
 setTimeout("cbeScrollEvent()", 250);

} function cbeResizeEvent() {

 if (!window.cbeOnResizeListener) { return; }
 var dw = window.cbeOldWidth - cbeInnerWidth();
 var dh = window.cbeOldHeight - cbeInnerHeight();
 if (dw != 0 || dh != 0) {
   if (window.cbeOnResizeListener) cbeEval(window.cbeOnResizeListener, dw, dh);
   window.cbeOldWidth = cbeInnerWidth();
   window.cbeOldHeight = cbeInnerHeight();
 }
 setTimeout("cbeResizeEvent()", 250);

} function cbeDefaultResizeListener() {

 if (is.opera) location.replace(location.href);
 else history.go(0);

} var cbeDragObj, cbeDragTarget, cbeDragPhase; function cbeDragStartEvent(e) {

 if (is.opera) { var tn = e.target.tagName.toLowerCase(); if (tn == "a") return; }
 else if (is.nav4) { if (e.target.href) return; }
 cbeDragObj = e.cbeCurrentTarget;
 cbeDragTarget = e.cbeTarget;
 if (cbeDragTarget.id == cbeDragObj.id) cbeDragPhase = e.AT_TARGET;
 else if (cbeDragObj.ondragCapture) cbeDragPhase = e.CAPTURING_PHASE;
 else cbeDragPhase = e.BUBBLING_PHASE;
 if (cbeDragObj) {
   if (cbeDragObj.ondragstart) { e.type = "dragstart"; cbeEval(cbeDragObj.ondragstart, e); e.type = "mousedown"; }
   cbeDragObj.x = e.pageX;
   cbeDragObj.y = e.pageY;
   document.cbe.addEventListener("mousemove", cbeDragEvent, cbeDragObj.ondragCapture);
   document.cbe.addEventListener("mouseup", cbeDragEndEvent, false);
 }
 e.stopPropagation();
 e.preventDefault();

} function cbeDragEndEvent(e) {

 document.cbe.removeEventListener("mousemove", cbeDragEvent, cbeDragObj.ondragCapture);
 document.cbe.removeEventListener("mouseup", cbeDragEndEvent, false);
 if (cbeDragObj.ondragend) {
   e.type = "dragend";
   e.cbeCurrentTarget = cbeDragObj;
   e.cbeTarget = cbeDragTarget;
   cbeEval(cbeDragObj.ondragend, e);
   e.type = "mouseup";
 }
 //e.stopPropagation();
 e.preventDefault();

} function cbeDragEvent(e) {

 if (cbeDragObj) {
   e.dx = e.pageX - cbeDragObj.x;
   e.dy = e.pageY - cbeDragObj.y;
   cbeDragObj.x = e.pageX;
   cbeDragObj.y = e.pageY;
   e.type = "drag";
   e.cbeTarget = cbeDragTarget;
   e.cbeCurrentTarget = cbeDragObj;
   e.eventPhase = cbeDragPhase;
   if (cbeDragObj.ondrag) cbeEval(cbeDragObj.ondrag, e);
   else cbeDragObj.moveBy(e.dx,e.dy);
   e.type = "mousemove";
 }
 //e.stopPropagation();
 e.preventDefault();

} var cbeEventPhase = new Array("", "AT_TARGET", "BUBBLING_PHASE", "CAPTURING_PHASE"); var cbeButton = new Array("LEFT", "MIDDLE", "RIGHT", "undefined", "non-mouse event"); CrossBrowserElement.prototype.ondragstart = null; CrossBrowserElement.prototype.ondrag = null; CrossBrowserElement.prototype.ondragend = null; var cbeEventJsLoaded = true; // End cbe_event.js </script>

* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru
* Copyright (c) 2002 Michael Foster (mike@cross-browser.ru)
* Distributed under the terms of the GNU LGPL from gnu.org

/

CrossBrowserElement.prototype.slideBy = function(dX, dY, totalTime, endListener) {

 var targetX, targetY;
 dX = parseInt(dX); dY = parseInt(dY); targetX = this.left() + dX; targetY = this.top() + dY;
 this.slideTo(targetX, targetY, totalTime, endListener)

} CrossBrowserElement.prototype.slideTo = function(x, y, totalTime, endListener) {

 if (this.onslidestart) cbeEval(this.onslidestart, this);
 this.xTarget = parseInt(x); this.yTarget = parseInt(y);
 this.slideTime = parseInt(totalTime);
 if (isNaN(this.xTarget)) {
   var outside=false;
   if (isNaN(this.yTarget)) { y = 0; outside = true; }
   this.cardinalPosition(x, y, outside); this.xTarget = this.x; this.yTarget = this.y;
 }
 if (endListener && window.cbeEventJsLoaded) { this.autoRemoveListener = true; this.addEventListener("slideend", endListener); }
 this.stop = false;
 this.yA = this.yTarget - this.top(); this.xA = this.xTarget - this.left(); // A = distance
 this.B = Math.PI / (2 * this.slideTime); // B = period
 this.yD = this.top(); this.xD = this.left(); // D = initial position
 if (this.slideRate == cbeSlideRateLinear) { this.B = 1/this.slideTime; }
 else if (this.slideRate == cbeSlideRateCosine) {
   this.yA = -this.yA; this.xA = -this.xA; this.yD = this.yTarget; this.xD = this.xTarget;
 }
 var d = new Date(); this.C = d.getTime();
 if (!this.moving) this.slide();

} CrossBrowserElement.prototype.slide = function() {

 var now, s, t, newY, newX;
 now = new Date();
 t = now.getTime() - this.C;
 if (this.stop) { this.moving = false; }
 else if (t < this.slideTime) {
   setTimeout("window.cbeAll["+this.index+"].slide()", this.timeout);
   if (this.slideRate == cbeSlideRateLinear) s = this.B * t;
   else if (this.slideRate == cbeSlideRateSine) s = Math.sin(this.B * t);
   else s = Math.cos(this.B * t); // this.slideRate == cbeSlideRateCosine
   newX = Math.round(this.xA * s + this.xD);
   newY = Math.round(this.yA * s + this.yD);
   if (this.onslide) cbeEval(this.onslide, this, newX, newY, t);
   this.moveTo(newX, newY);
   this.moving = true;
 }  
 else {
   this.moveTo(this.xTarget, this.yTarget);
   this.moving = false;
   if (this.onslideend) {
     var tmp = this.onslideend;
     if (this.autoRemoveListener && window.cbeEventJsLoaded) {
       this.autoRemoveListener = false;
       this.removeEventListener("slideend");
     }
     cbeEval(tmp, this);
   }
 }

} CrossBrowserElement.prototype.ellipse = function(xRadius, yRadius, radiusInc, totalTime, startAngle, stopAngle, endListener) {

 if (this.onslidestart) cbeEval(this.onslidestart, this);
 this.stop = false;
 this.xA = parseInt(xRadius);
 this.yA = parseInt(yRadius);
 this.radiusInc = parseInt(radiusInc);
 this.slideTime = parseInt(totalTime);
 startAngle = cbeRadians(parseFloat(startAngle));
 stopAngle = cbeRadians(parseFloat(stopAngle));
 if (endListener && window.cbeEventJsLoaded) {
   this.autoRemoveListener = true;
   this.addEventListener("slideend", endListener);
 }
 var startTime = (startAngle * this.slideTime) / (stopAngle - startAngle);
 this.stopTime = this.slideTime + startTime;
 this.B = (stopAngle - startAngle) / this.slideTime;
 this.xD = this.left() - Math.round(this.xA * Math.cos(this.B * startTime)); // center point
 this.yD = this.top() - Math.round(this.yA * Math.sin(this.B * startTime)); 
 this.xTarget = Math.round(this.xA * Math.cos(this.B * this.stopTime) + this.xD); // end point
 this.yTarget = Math.round(this.yA * Math.sin(this.B * this.stopTime) + this.yD); 
 var d = new Date();
 this.C = d.getTime() - startTime;
 if (!this.moving) this.ellipse1();

} CrossBrowserElement.prototype.ellipse1 = function() {

 var now, t, newY, newX;
 now = new Date();
 t = now.getTime() - this.C;
 if (this.stop) { this.moving = false; }
 else if (t < this.stopTime) {
   setTimeout("window.cbeAll["+this.index+"].ellipse1()", this.timeout);
   if (this.radiusInc) {
     this.xA += this.radiusInc;
     this.yA += this.radiusInc;
   }
   newX = Math.round(this.xA * Math.cos(this.B * t) + this.xD);
   newY = Math.round(this.yA * Math.sin(this.B * t) + this.yD);
   if (this.onslide) cbeEval(this.onslide, this, newX, newY, t);
   this.moveTo(newX, newY);
   this.moving = true;
 }  
 else {
   if (this.radiusInc) {
     this.xTarget = Math.round(this.xA * Math.cos(this.B * this.slideTime) + this.xD);
     this.yTarget = Math.round(this.yA * Math.sin(this.B * this.slideTime) + this.yD); 
   }
   this.moveTo(this.xTarget, this.yTarget);
   this.moving = false;
   if (this.onslideend) {
     var tmp = this.onslideend;
     if (this.autoRemoveListener && window.cbeEventJsLoaded) {
       this.autoRemoveListener = false;
       this.removeEventListener("slideend");
     }
     cbeEval(tmp, this);
   }
 }

} CrossBrowserElement.prototype.stopSlide = function() { this.stop = true; } CrossBrowserElement.prototype.startSequence = function(uIndex) {

 if (!this.moving) {
   if (!uIndex) this.seqIndex = 0;
   else this.seqIndex = uIndex;
   this.addEventListener("slideEnd", cbeSlideSequence);
   cbeSlideSequence(this);
 }

} CrossBrowserElement.prototype.stopSequence = function() {

 this.stop=true;
 this.removeEventListener("slideEnd", cbeSlideSequence);

} function cbeSlideSequence(cbe) {

 var
   pw = cbe.parentNode.width(),
   ph = cbe.parentNode.height(),
   w = cbe.width(),
   h = cbe.height();
 if (cbe.seqIndex >= cbe.sequence.length) cbe.seqIndex = 0;
 eval("cbe."+cbe.sequence[cbe.seqIndex++]);

} var cbeSlideRateLinear=0, cbeSlideRateSine=1, cbeSlideRateCosine=2; CrossBrowserElement.prototype.slideRate = cbeSlideRateSine; CrossBrowserElement.prototype.seqIndex = 0; CrossBrowserElement.prototype.radiusInc = 0; CrossBrowserElement.prototype.t = 0; CrossBrowserElement.prototype.xTarget = 0; CrossBrowserElement.prototype.yTarget = 0; CrossBrowserElement.prototype.slideTime = 1000; CrossBrowserElement.prototype.xA = 0; CrossBrowserElement.prototype.yA = 0; CrossBrowserElement.prototype.xD = 0; CrossBrowserElement.prototype.yD = 0; CrossBrowserElement.prototype.B = 0; CrossBrowserElement.prototype.C = 0; CrossBrowserElement.prototype.moving = false; CrossBrowserElement.prototype.stop = true; CrossBrowserElement.prototype.timeout = 35; CrossBrowserElement.prototype.autoRemoveListener = false; CrossBrowserElement.prototype.onslidestart = null; CrossBrowserElement.prototype.onslide = null; CrossBrowserElement.prototype.onslideend = null; var cbeSlideJsLoaded = true; // End cbe_slide.js </script>

* CBE v4.19, Cross-Browser DHTML API from Cross-Browser.ru
* Copyright (c) 2002 Michael Foster (mike@cross-browser.ru)
* Distributed under the terms of the GNU LGPL from gnu.org

/

// visit function returns: 0 == stop, 1 == continue, 2 == skip subtree function cbeTraverseTree(order, startNode, visitFunction, data) {

 cbeTraversePreOrder(startNode, 0, 0, visitFunction, data);

} function cbeTraversePreOrder(node, level, branch, vFn, data) {

 var ret = vFn(node,level,branch,data);
 if (!ret) return 0;
 if (ret == 1 && node.firstChild) {
   var child = node.firstChild;
   while (child) {
     if (!level) ++branch;
     if (!cbeTraversePreOrder(child,level+1,branch,vFn,data)) return 1;
     child = child.nextSibling;
   }
 }
 return 1;

} var cbeImageCount=0; var cbeImageObj = new Array(); var cbeImageName = new Array(); function cbeNewImage(imgName, imgUrl, imgWidth, imgHeight) {

 var imgObj;
 if (arguments.length == 4) imgObj = new Image(imgWidth,imgHeight);
 else imgObj = new Image();
 imgObj.src = imgUrl;
 imgObj.id = imgObj.name = imgName;
 cbeImageObj[cbeImageCount] = imgObj;
 cbeImageName[cbeImageCount++] = imgName;
 return imgObj;

} function cbeSetImage(tagImg, preloadedImg) {

 var t, p;
 if (typeof(tagImg)=="string") t = cbeGetImageByName(tagImg);
 else t = tagImg;
 if (typeof(preloadedImg)=="string") p = cbeGetImageByName(preloadedImg);
 else p = preloadedImg;
 t.src = p.src;

} function cbeGetImageByName(imgName) {

 var i, j;
 if (document.images[imgName]) return document.images[imgName];
 if (is.nav4) {
   for (i = 0; i < cbeAll.length; i++) {
     if (cbeAll[i].ele.document) {
       for (j = 0; j < cbeAll[i].ele.document.images.length; j++) {
         if (imgName == cbeAll[i].ele.document.images[j].name) return cbeAll[i].ele.document.images[j];
       }
     }
   }
 }
 for (i = 0; i < cbeImageName.length; i++) {
   if (cbeImageName[i] == imgName) return cbeImageObj[i];
 }
 return null;

} function cbeGetFormByName(frmName) {

 var i, j;
 if (document.forms[frmName]) return document.forms[frmName];
 if (is.nav4) {
   for (i = 0; i < cbeAll.length; i++) {
     if (cbeAll[i].ele.document) {
       for (j = 0; j < cbeAll[i].ele.document.forms.length; j++) {
         if (frmName == cbeAll[i].ele.document.forms[j].name) return cbeAll[i].ele.document.forms[j];
       }
     }
   }
 }
 return null;

} // cookie implementations based on code from Netscape Javascript Guide function cbeSetCookie(name, value, expire, path) {

 document.cookie = name + "=" + escape(value) + ((!expire) ? "" : ("; expires=" + expire.toGMTString())) + "; path=/";

} function cbeGetCookie(name) {

 var value=null, search=name+"=";
 if (document.cookie.length > 0) {
   var offset = document.cookie.indexOf(search);
   if (offset != -1) {
     offset += search.length;
     var end = document.cookie.indexOf(";", offset);
     if (end == -1) end = document.cookie.length;
     value = unescape(document.cookie.substring(offset, end));
   }
 }
 return value;

} function cbeGetURLArguments() {

 var idx = location.href.indexOf("?");
 var params = new Array();
 if (idx != -1) {
   var pairs = location.href.substring(idx+1, location.href.length).split("&");
   for (var i=0; i<pairs.length; i++) {
     nameVal = pairs[i].split("=");
     params[i] = nameVal[1];
     params[nameVal[0]] = nameVal[1];
   }
 }
 return params;

} function cbePad(str, finalLen, padChar, left) {

 if (left) { for (var i=str.length; i<finalLen; ++i) str = padChar + str; }
 else { for (var i=str.length; i<finalLen; ++i) str += padChar; }
 return str;

} function cbeHexString(n, digits, prefix) {

 var p = "", n = Math.ceil(n);
 if (prefix) p = prefix;
 n = n.toString(16);
 for (var i=0; i < digits - n.length; ++i) {
   p += "0"; 
 }
 return p + n;

} function cbeRadians(deg) { return deg * (Math.PI / 180); } function cbeDegrees(rad) { return rad * (180 / Math.PI); } function cbeAddDragResizeListener(cbe) {

 cbe.addEventListener("dragStart", cbeDragResizeStartListener);
 cbe.addEventListener("drag", cbeDragResizeListener);

} function cbeRemoveDragResizeListener(cbe) {

 cbe.removeEventListener("dragStart", cbeDragResizeStartListener);
 cbe.removeEventListener("drag", cbeDragResizeListener);

} function cbeDragResizeStartListener(e) {

 if (e.offsetX > (e.cbeCurrentTarget.width() - 20) && e.offsetY > (e.cbeCurrentTarget.height() - 20)) {
   e.cbeCurrentTarget.isResizing = true;
 }
 else e.cbeCurrentTarget.isResizing = false;

} function cbeDragResizeListener(e) {

 if (e.cbeCurrentTarget.isResizing) e.cbeCurrentTarget.resizeBy(e.dx, e.dy);
 else e.cbeCurrentTarget.moveBy(e.dx, e.dy);

} var cbeUtilJsLoaded = true; // End cbe_util.js </script>

 YES: Retrieve and set currMonth & currYear to the values stored in Cookie
 NO: Set currMonth & currYear to now and set Cookie

2. CBE will automatically call windowOnLoad() which, in turn, will...

a. Create the CrossBrowserElement objects.
b. Call Calendar() which will...
 i. Calculate the calendar info: firstDay, daysInMonth, sevenDayRows.
 ii. Determine nextMonth, nextYear, prevMonth, & prevYear.
 iii. Call cbeTraverseTree() with a reference to drawCalendar() which will...
  * Populate the innerHTML for each object in the CBE Object Tree.

/

// For simplicity"s sake: Include the equal sign in the cookie"s name var cookieName = "ISO8601="; if (document.cookie.indexOf(cookieName) != -1) {

 // Retrieve the stored date to set the global variables (used to generate the calender)
 start = document.cookie.indexOf(cookieName) + cookieName.length;  
 end = document.cookie.indexOf(";",start);
 if (end == -1) end = document.cookie.length;
 ISO8601 = document.cookie.substring(start,end);
 currDate = ISO8601.split("-");
 currYear  = currDate[0];
 currMonth  = currDate[1];

} else {

 // Use the present date to set the global variables (used to generate the calender)
 currYear  = now.getYear();
 currMonth  = now.getMonth();
 // Some browsers may not be Y2K compliant...
 if (currYear < 1900) currYear += 1900;

} function Calendar(Month,Year) {

 currDateObj  = new Date(Year,Month,1);
 // Update the global variables (used to generate the calender)
 currMonth  = Month;
 currYear  = Year;
 
 // Perform the basic calculations necessary to generate a calendar
 firstDay  = currDateObj.getDay();  // The day-of-the-week of the first day of the month;
 daysInMonth  = 32 - new Date(Year,Month,32).getDate();
 sevenDayRows = Math.ceil((firstDay + daysInMonth) / 7);
 
 switch (Month) {
 case 0:
   nextMonth  = Month + 1;
   nextYear  = Year;
   prevMonth  = 11;
   prevYear  = Year - 1;
   break;
 
 case 11:
   nextMonth  = 0;
   nextYear  = Year + 1;
   prevMonth  = Month - 1;
   prevYear  = Year;
   break;
 
 default:
   nextMonth  = Month + 1;
   nextYear  = Year;
   prevMonth  = Month - 1;
   prevYear  = Year;
   break;
 }
 
 i = 0; j = 1;
 cbeTraverseTree("preorder",DHTMLC,drawCalendar);
 DHTMLC.resizeTo(230, sevenDayRows * 20 + 60);
 moniker.top(sevenDayRows * 20 + 50);
 prev.innerHtml("<A HREF="javascript:Calendar(prevMonth,prevYear);">" + months[prevMonth].substr(0,3) + "</A>");
 curr.innerHtml(months[Month] + ", " + Year);
 next.innerHtml("<A HREF="javascript:Calendar(nextMonth,nextYear);">" + months[nextMonth].substr(0,3) + "</A>");

} function drawCalendar(node,level,branch) {

 var HREF;
 if (level == 2 && branch > 2) {
   if (i >= firstDay && j <= daysInMonth) {
     HREF = "javascript:void(document.forms[0].elements[0].value=\"" + (currMonth + 1) + "/" + j + "/" + currYear + "\")";
     node.innerHtml("<A HREF="" + HREF + "">" + j++ + "</A>");
     node.innerHtml();node.show();
   } else {
     node.hide();
   }
   i++;
 }
 return true;

} var clicked, displaying; var buttons, button1, button2, button3, button4, button5; var page, wii, htui, will, htgi, wywn; var cover; function createSlides(node,level,branch) {

 if (level == 1) {
   with(node) {
     node.moveTo(0,450);
     node.sizeTo(550,420);
   }
 }
 return true;

} function resetButtonColors(node,level,branch) {

 if (node.id == "badge1") return true;
 if (level == 1) node.background("#ccffcc");
 return true;

} function mouseOverListener(e) {

 if (e.cbeCurrentTarget.id == clicked) return true;
 e.cbeCurrentTarget.background("#99ff99");

} function mouseOutListener(e) {

 if (e.cbeCurrentTarget.id == clicked) return true;
 e.cbeCurrentTarget.background("#ccffcc");

} function onClickListener(e) {

 cbeTraverseTree("preorder",buttons,resetButtonColors);
 e.cbeCurrentTarget.background("#ffffff");
 clicked = e.cbeCurrentTarget.id;
 if (displaying) eval(displaying).slideTo(0,450,1500);
 switch(e.cbeCurrentTarget.id) {
 case "button1": displaying = "wii";  wii.slideTo(0,0,1500);  break;
 case "button2": displaying = "will"; will.slideTo(0,0,1500); break;
 case "button3": displaying = "wywn"; wywn.slideTo(0,0,1500); break;
 case "button4": displaying = "htgi"; htgi.slideTo(0,0,1500); break;
 case "button5": displaying = "htui"; htui.slideTo(0,0,1500); break;
 }

} function windowOnload() {

 page  = cbeGetElementById("page").cbe;
 page.sizeTo(570,450);
 page.clip("auto");
 if (is.ie4up) page.left(171);
 cbeTraverseTree("preorder",page,createSlides);
 // These references will be accessed by eval"ing their names in onClickListener()
 wii  = cbeGetElementById("wii").cbe;
 htui  = cbeGetElementById("htui").cbe;
 will  = cbeGetElementById("will").cbe;
 htgi  = cbeGetElementById("htgi").cbe;
 wywn  = cbeGetElementById("wywn").cbe;
 buttons = cbeGetElementById("buttons").cbe;
 button1 = cbeGetElementById("button1").cbe;
 button1.addEventListener("mouseOver",mouseOverListener);
 button1.addEventListener("mouseOut",mouseOutListener);
 button1.addEventListener("click",onClickListener);
 button2 = cbeGetElementById("button2").cbe;
 button2.addEventListener("mouseOver",mouseOverListener);
 button2.addEventListener("mouseOut",mouseOutListener);
 button2.addEventListener("click",onClickListener);
 button3 = cbeGetElementById("button3").cbe;
 button3.addEventListener("mouseOver",mouseOverListener);
 button3.addEventListener("mouseOut",mouseOutListener);
 button3.addEventListener("click",onClickListener);
 button4 = cbeGetElementById("button4").cbe;
 button4.addEventListener("mouseOver",mouseOverListener);
 button4.addEventListener("mouseOut",mouseOutListener);
 button4.addEventListener("click",onClickListener);
 button5 = cbeGetElementById("button5").cbe;
 button5.addEventListener("mouseOver",mouseOverListener);
 button5.addEventListener("mouseOut",mouseOutListener);
 button5.addEventListener("click",onClickListener);
 cover  = cbeGetElementById("cover").cbe;
 cover.sizeTo(570,450);
 cover.hide();
 DHTMLC  = cbeGetElementById("DHTMLC").cbe;
 prev  = cbeGetElementById("prev").cbe;
 curr  = cbeGetElementById("curr").cbe;
 next  = cbeGetElementById("next").cbe;
 moniker  = cbeGetElementById("moniker").cbe;
 Calendar(currMonth,currYear);
 DHTMLC.clip("auto");
 DHTMLC.show();

}

</script> </head> <body>

First Item

Second Item

Third

Fourth

Fifth

Oops - There"s been an error!

If this notice remains visible for more than 10-15 seconds please <a href="javascript:alert("This feature is currently under development.");window.location.reload();">click here</a> to be redirected to the static version of this site.

First Item

Content

1
2

August, 2005

Sun

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

   <form>You selected...<input size="10" type="text"></form>

2

LIne

C -
w s.
days - T

3

.

The DHTML Calendar files:
1. ,
2. d
3. .
d
1. cbe_core.js, and
2. cbe_util.js.

H

e

via HTTP, or
via </a>.

T

H

A

R
R
U
E
I
I
n.

</body></html>

 </source>

Tabber Example

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Simple Tabber Example</title> <script type="text/javascript"> /* $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $

 tabber.js by Patrick Fitzgerald pat@barelyfitz.ru
 Documentation can be found at the following URL:
 http://www.barelyfitz.ru/projects/tabber/
 License (http://www.opensource.org/licenses/mit-license.php)
 Copyright (c) 2006 Patrick Fitzgerald
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation files
 (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify, merge,
 publish, distribute, sublicense, and/or sell copies of the Software,
 and to permit persons to whom the Software is furnished to do so,
 subject to the following conditions:
 The above copyright notice and this permission notice shall be
 included in all copies or substantial portions of the Software.
 THE 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.
 */

function tabberObj(argsObj) {

 var arg; /* name of an argument to override */
 /* Element for the main tabber div. If you supply this in argsObj,
    then the init() method will be called.
 */
 this.div = null;
 /* Class of the main tabber div */
 this.classMain = "tabber";
 /* Rename classMain to classMainLive after tabifying
    (so a different style can be applied)
 */
 this.classMainLive = "tabberlive";
 /* Class of each DIV that contains a tab */
 this.classTab = "tabbertab";
 /* Class to indicate which tab should be active on startup */
 this.classTabDefault = "tabbertabdefault";
 /* Class for the navigation UL */
 this.classNav = "tabbernav";
 /* When a tab is to be hidden, instead of setting display="none", we
    set the class of the div to classTabHide. In your screen
    stylesheet you should set classTabHide to display:none.  In your
    print stylesheet you should set display:block to ensure that all
    the information is printed.
 */
 this.classTabHide = "tabbertabhide";
 /* Class to set the navigation LI when the tab is active, so you can
    use a different style on the active tab.
 */
 this.classNavActive = "tabberactive";
 /* Elements that might contain the title for the tab, only used if a
    title is not specified in the TITLE attribute of DIV classTab.
 */
 this.titleElements = ["h2","h3","h4","h5","h6"];
 /* Should we strip out the HTML from the innerHTML of the title elements?
    This should usually be true.
 */
 this.titleElementsStripHTML = true;
 /* If the user specified the tab names using a TITLE attribute on
    the DIV, then the browser will display a tooltip whenever the
    mouse is over the DIV. To prevent this tooltip, we can remove the
    TITLE attribute after getting the tab name.
 */
 this.removeTitle = true;
 /* If you want to add an id to each link set this to true */
 this.addLinkId = false;
 /* If addIds==true, then you can set a format for the ids.
    <tabberid> will be replaced with the id of the main tabber div.
    <tabnumberzero> will be replaced with the tab number
      (tab numbers starting at zero)
    <tabnumberone> will be replaced with the tab number
      (tab numbers starting at one)
    <tabtitle> will be replaced by the tab title
      (with all non-alphanumeric characters removed)
  */
 this.linkIdFormat = "<tabberid>nav<tabnumberone>";
 /* You can override the defaults listed above by passing in an object:
    var mytab = new tabber({property:value,property:value});
 */
 for (arg in argsObj) { this[arg] = argsObj[arg]; }
 /* Create regular expressions for the class names; Note: if you
    change the class names after a new object is created you must
    also change these regular expressions.
 */
 this.REclassMain = new RegExp("\\b" + this.classMain + "\\b", "gi");
 this.REclassMainLive = new RegExp("\\b" + this.classMainLive + "\\b", "gi");
 this.REclassTab = new RegExp("\\b" + this.classTab + "\\b", "gi");
 this.REclassTabDefault = new RegExp("\\b" + this.classTabDefault + "\\b", "gi");
 this.REclassTabHide = new RegExp("\\b" + this.classTabHide + "\\b", "gi");
 /* Array of objects holding info about each tab */
 this.tabs = new Array();
 /* If the main tabber div was specified, call init() now */
 if (this.div) {
   this.init(this.div);
   /* We don"t need the main div anymore, and to prevent a memory leak
      in IE, we must remove the circular reference between the div
      and the tabber object. */
   this.div = null;
 }

}

/*--------------------------------------------------

 Methods for tabberObj
 --------------------------------------------------*/

tabberObj.prototype.init = function(e) {

 /* Set up the tabber interface.
    e = element (the main containing div)
    Example:
    init(document.getElementById("mytabberdiv"))
  */
 var
 childNodes, /* child nodes of the tabber div */
 i, i2, /* loop indices */
 t, /* object to store info about a single tab */
 defaultTab=0, /* which tab to select by default */
 DOM_ul, /* tabbernav list */
 DOM_li, /* tabbernav list item */
 DOM_a, /* tabbernav link */
 aId, /* A unique id for DOM_a */
 headingElement; /* searching for text to use in the tab */
 /* Verify that the browser supports DOM scripting */
 if (!document.getElementsByTagName) { return false; }
 /* If the main DIV has an ID then save it. */
 if (e.id) {
   this.id = e.id;
 }
 /* Clear the tabs array (but it should normally be empty) */
 this.tabs.length = 0;
 /* Loop through an array of all the child nodes within our tabber element. */
 childNodes = e.childNodes;
 for(i=0; i < childNodes.length; i++) {
   /* Find the nodes where class="tabbertab" */
   if(childNodes[i].className &&
      childNodes[i].className.match(this.REclassTab)) {
     
     /* Create a new object to save info about this tab */
     t = new Object();
     
     /* Save a pointer to the div for this tab */
     t.div = childNodes[i];
     
     /* Add the new object to the array of tabs */
     this.tabs[this.tabs.length] = t;
     /* If the class name contains classTabDefault,
  then select this tab by default.
     */
     if (childNodes[i].className.match(this.REclassTabDefault)) {
 defaultTab = this.tabs.length-1;
     }
   }
 }
 /* Create a new UL list to hold the tab headings */
 DOM_ul = document.createElement("ul");
 DOM_ul.className = this.classNav;
 
 /* Loop through each tab we found */
 for (i=0; i < this.tabs.length; i++) {
   t = this.tabs[i];
   /* Get the label to use for this tab:
      From the title attribute on the DIV,
      Or from one of the this.titleElements[] elements,
      Or use an automatically generated number.
    */
   t.headingText = t.div.title;
   /* Remove the title attribute to prevent a tooltip from appearing */
   if (this.removeTitle) { t.div.title = ""; }
   if (!t.headingText) {
     /* Title was not defined in the title of the DIV,
  So try to get the title from an element within the DIV.
  Go through the list of elements in this.titleElements
  (typically heading elements ["h2","h3","h4"])
     */
     for (i2=0; i2<this.titleElements.length; i2++) {
 headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
 if (headingElement) {
   t.headingText = headingElement.innerHTML;
   if (this.titleElementsStripHTML) {
     t.headingText.replace(/
/gi," ");
     t.headingText = t.headingText.replace(/<[^>]+>/g,"");
   }
   break;
 }
     }
   }
   if (!t.headingText) {
     /* Title was not found (or is blank) so automatically generate a
        number for the tab.
     */
     t.headingText = i + 1;
   }
   /* Create a list element for the tab */
   DOM_li = document.createElement("li");
   /* Save a reference to this list item so we can later change it to
      the "active" class */
   t.li = DOM_li;
   /* Create a link to activate the tab */
   DOM_a = document.createElement("a");
   DOM_a.appendChild(document.createTextNode(t.headingText));
   DOM_a.href = "javascript:void(null);";
   DOM_a.title = t.headingText;
   DOM_a.onclick = this.navClick;
   /* Add some properties to the link so we can identify which tab
      was clicked. Later the navClick method will need this.
   */
   DOM_a.tabber = this;
   DOM_a.tabberIndex = i;
   /* Do we need to add an id to DOM_a? */
   if (this.addLinkId && this.linkIdFormat) {
     /* Determine the id name */
     aId = this.linkIdFormat;
     aId = aId.replace(/<tabberid>/gi, this.id);
     aId = aId.replace(/<tabnumberzero>/gi, i);
     aId = aId.replace(/<tabnumberone>/gi, i+1);
     aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ""));
     DOM_a.id = aId;
   }
   /* Add the link to the list element */
   DOM_li.appendChild(DOM_a);
   /* Add the list element to the list */
   DOM_ul.appendChild(DOM_li);
 }
 /* Add the UL list to the beginning of the tabber div */
 e.insertBefore(DOM_ul, e.firstChild);
 /* Make the tabber div "live" so different CSS can be applied */
 e.className = e.className.replace(this.REclassMain, this.classMainLive);
 /* Activate the default tab, and do not call the onclick handler */
 this.tabShow(defaultTab);
 /* If the user specified an onLoad function, call it now. */
 if (typeof this.onLoad == "function") {
   this.onLoad({tabber:this});
 }
 return this;

};

tabberObj.prototype.navClick = function(event) {

 /* This method should only be called by the onClick event of an <A>
    element, in which case we will determine which tab was clicked by
    examining a property that we previously attached to the <A>
    element.
    Since this was triggered from an onClick event, the variable
    "this" refers to the <A> element that triggered the onClick
    event (and not to the tabberObj).
    When tabberObj was initialized, we added some extra properties
    to the <A> element, for the purpose of retrieving them now. Get
    the tabberObj object, plus the tab number that was clicked.
 */
 var
 rVal, /* Return value from the user onclick function */
 a, /* element that triggered the onclick event */
 self, /* the tabber object */
 tabberIndex, /* index of the tab that triggered the event */
 onClickArgs; /* args to send the onclick function */
 a = this;
 if (!a.tabber) { return false; }
 self = a.tabber;
 tabberIndex = a.tabberIndex;
 /* Remove focus from the link because it looks ugly.
    I don"t know if this is a good idea...
 */
 a.blur();
 /* If the user specified an onClick function, call it now.
    If the function returns false then do not continue.
 */
 if (typeof self.onClick == "function") {
   onClickArgs = {"tabber":self, "index":tabberIndex, "event":event};
   /* IE uses a different way to access the event object */
   if (!event) { onClickArgs.event = window.event; }
   rVal = self.onClick(onClickArgs);
   if (rVal === false) { return false; }
 }
 self.tabShow(tabberIndex);
 return false;

};

tabberObj.prototype.tabHideAll = function() {

 var i; /* counter */
 /* Hide all tabs and make all navigation links inactive */
 for (i = 0; i < this.tabs.length; i++) {
   this.tabHide(i);
 }

};

tabberObj.prototype.tabHide = function(tabberIndex) {

 var div;
 if (!this.tabs[tabberIndex]) { return false; }
 /* Hide a single tab and make its navigation link inactive */
 div = this.tabs[tabberIndex].div;
 /* Hide the tab contents by adding classTabHide to the div */
 if (!div.className.match(this.REclassTabHide)) {
   div.className += " " + this.classTabHide;
 }
 this.navClearActive(tabberIndex);
 return this;

};

tabberObj.prototype.tabShow = function(tabberIndex) {

 /* Show the tabberIndex tab and hide all the other tabs */
 var div;
 if (!this.tabs[tabberIndex]) { return false; }
 /* Hide all the tabs first */
 this.tabHideAll();
 /* Get the div that holds this tab */
 div = this.tabs[tabberIndex].div;
 /* Remove classTabHide from the div */
 div.className = div.className.replace(this.REclassTabHide, "");
 /* Mark this tab navigation link as "active" */
 this.navSetActive(tabberIndex);
 /* If the user specified an onTabDisplay function, call it now. */
 if (typeof this.onTabDisplay == "function") {
   this.onTabDisplay({"tabber":this, "index":tabberIndex});
 }
 return this;

}; tabberObj.prototype.navSetActive = function(tabberIndex) {

 /* Note: this method does *not* enforce the rule
    that only one nav item can be active at a time.
 */
 /* Set classNavActive for the navigation list item */
 this.tabs[tabberIndex].li.className = this.classNavActive;
 return this;

};

tabberObj.prototype.navClearActive = function(tabberIndex) {

 /* Note: this method does *not* enforce the rule
    that one nav should always be active.
 */
 /* Remove classNavActive from the navigation list item */
 this.tabs[tabberIndex].li.className = "";
 return this;

}; function tabberAutomatic(tabberArgs) {

 /* This function finds all DIV elements in the document where
    class=tabber.classMain, then converts them to use the tabber
    interface.
    tabberArgs = an object to send to "new tabber()"
 */
 var
   tempObj, /* Temporary tabber object */
   divs, /* Array of all divs on the page */
   i; /* Loop index */
 if (!tabberArgs) { tabberArgs = {}; }
 /* Create a tabber object so we can get the value of classMain */
 tempObj = new tabberObj(tabberArgs);
 /* Find all DIV elements in the document that have class=tabber */
 /* First get an array of all DIV elements and loop through them */
 divs = document.getElementsByTagName("div");
 for (i=0; i < divs.length; i++) {
   
   /* Is this DIV the correct class? */
   if (divs[i].className &&
 divs[i].className.match(tempObj.REclassMain)) {
     
     /* Now tabify the DIV */
     tabberArgs.div = divs[i];
     divs[i].tabber = new tabberObj(tabberArgs);
   }
 }
 
 return this;

}

function tabberAutomaticOnLoad(tabberArgs) {

 /* This function adds tabberAutomatic to the window.onload event,
    so it will run after the document has finished loading.
 */
 var oldOnLoad;
 if (!tabberArgs) { tabberArgs = {}; }
 /* Taken from: http://simon.incutio.ru/archive/2004/05/26/addLoadEvent */
 oldOnLoad = window.onload;
 if (typeof window.onload != "function") {
   window.onload = function() {
     tabberAutomatic(tabberArgs);
   };
 } else {
   window.onload = function() {
     oldOnLoad();
     tabberAutomatic(tabberArgs);
   };
 }

}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == "undefined") {

   tabberAutomaticOnLoad();

} else {

 if (!tabberOptions["manualStartup"]) {
   tabberAutomaticOnLoad(tabberOptions);
 }

} </script> <style TYPE="text/css" MEDIA="screen"> /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*--------------------------------------------------

 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/

.tabberlive .tabbertabhide {

display:none;

} /*--------------------------------------------------

 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/

.tabber { } .tabberlive {

margin-top:1em;

} /*--------------------------------------------------

 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/

ul.tabbernav {

margin:0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;

} ul.tabbernav li {

list-style: none;
margin: 0;
display: inline;

} ul.tabbernav li a {

padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;

} ul.tabbernav li a:link { color: #448; } ul.tabbernav li a:visited { color: #667; } ul.tabbernav li a:hover {

color: #000;
background: #AAE;
border-color: #227;

} ul.tabbernav li.tabberactive a {

background-color: #fff;
border-bottom: 1px solid #fff;

} ul.tabbernav li.tabberactive a:hover {

color: #000;
background: white;
border-bottom: 1px solid white;

} /*--------------------------------------------------

 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/

.tabberlive .tabbertab {

padding:5px;
border:1px solid #aaa;
border-top:0;
/* If you don"t want the tab size changing whenever a tab is changed
   you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
   scrollbar when necessary */
/* overflow:auto; */

} /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 {

display:none;

} .tabberlive .tabbertab h3 {

display:none;

} /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab {

height:200px;
overflow:auto;

}

</style> <script type="text/javascript"> /* Optional: Temporarily hide the "tabber" class so it does not "flash"

  on the page as plain HTML. After tabber runs, the class is changed
  to "tabberlive" and it will appear. */

document.write("<style type="text/css">.tabber{display:none;}<\/style>"); </script> </head> <body>

Tabber Example

← <a href="http://www.barelyfitz.ru/projects/tabber/">Tabber Home</a>

Tab 1

Tab 1 content.

Tab 2

Tab 2 content.

Tab 3

Tab 3 content.

</body> </html>

 </source>

Tab control

   <source lang="html4strict">

/

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

  </style>
  <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) {

div.style.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) {

div.style.top = (numRows-(Math.floor(newPos/tabsPerRow) + 1)) * (tabHeight-
  vOffset)
div.style.left = (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 - 
  firstTab)
  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)
}

} </script>

</head><body>

Tabbed Panel

HTML

XHTML

CSS

DOM

JavaScript

DHTML

XML

XSLT

Hypertext Markup Language

<a href="http://www.w3.org/MarkUp/" target="external">HTML</a> is the language in which Web pages are written. HTML uses tags like <p> and </p> to identify how text is to be structured and formatted within a document.

Extensible HyperText Markup Language

<a href="http://www.w3.org/TR/xhtml1/" 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.

Cascading Style Sheets

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="http://www.w3.org/TR/REC-CSS1" target="external">CSS1</a> and <a href="http://www.w3.org/TR/REC-CSS2" target="external">CSS2</a>). CSS2 extends CSS1.

Document Object Model

The <a href="http://www.w3.org/DOM/" 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.

JavaScript

<a href="http://developer.netscape.ru/javascript/" 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.

Dynamic HTML

<a href="http://developer.netscape.ru/dhtml/" 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 events.

Extensible Markup Language

<a href="http://www.w3.org/XML/" 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 
  syntax.

XSL Transformations

<a href="http://www.w3.org/TR/xslt" 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 
  translation.

</body></html>

 </source>

Tab control for a game

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8;" /> <style type="text/css"> html,body {

 height:95%;
 margin:0px;
 font-family:Arial;
 cursor: crosshair;

} input {

 padding:2px;
 border:1px solid;
 background:#CCC;
 cursor:crosshair;

} textarea {

 padding:2px;
 border:1px solid;
 background:#CCC;
 cursor:crosshair;

} select {

 padding:2px;
 border:1px solid;
 background:#CCC;
 cursor:crosshair;

} a {

 text-decoration:none;
 color:black;

} tr,td {

 border:1px solid black;
 padding:5px;

} .tablist {

 border:1px solid black;
 border-bottom:0px;
 margin-left:5px;
 padding-left:5px;
 padding-right:5px;

} .tabcontent {

 border:1px solid black;
 padding:5px;
 height:560px;
 background:#DDD;

} .inputTitle {

 font-weight:bold;
 font-size:12px;

} .info {

 font-size:12px;

} li {

 font-size:12px;
 font-weight:normal;
 margin-bottom:5px;

} </style> <script type="text/javascript" src="wordsearch.js"></script> </head> <body onload="eventHandle();showStart();"> <noscript>You must have Javascript enabled to use this script.</noscript> <script type="text/javascript"> function changebgcolor(color) {

 document.bgColor = color;

} </script>

<a href="#" id="main" onclick="return tab(this.id);" class="tablist" style="background:#DDD"><script type="text/javascript">document.write(LANG[selectedLanguage]["main"]);</script></a> <a href="#" id="options" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["options"]);</script></a> <a href="#" id="options2" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["options2"]);</script></a> <a href="#" id="load" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["load"]);</script></a> <a href="#" id="information" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["info"]);</script></a>

(<script type="text/javascript">document.write(LANG[selectedLanguage]["sep"]);</script>)
<textarea cols="45" rows="15" name="inputWords" id="inputWords" onfocus="inputActive=1;" onblur="inputActive=0;"></textarea>

</script>

     <select name="BorF" id="BorF" style="margin-left:10px;margin-top:10px;">
       <option value="regular"><script type="text/javascript">document.write(LANG[selectedLanguage]["borf"]);</script></option>
       <option value="bonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["bonly"]);</script></option>
       <option value="fonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["fonly"]);</script></option>
     </select>
     


     <select name="diag" id="diag" style="margin-left:10px" onchange="if(document.getElementById("diag").options[1].selected==true && document.getElementById("uand").options[1].selected==true) document.getElementById("uand").options[2].selected=true; else if(document.getElementById("diag").options[0].selected==true && document.getElementById("uand").options[1].selected==true) document.getElementById("uand").options[0].selected=true; else if(document.getElementById("diag").options[1].selected==true && document.getElementById("uand").options[0].selected==true) document.getElementById("uand").options[2].selected=true;">
       <option value="diag"><script type="text/javascript">document.write(LANG[selectedLanguage]["diag"]);</script></option>
       <option value="diagonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["donly"]);</script></option>
       <option value="nodiag"><script type="text/javascript">document.write(LANG[selectedLanguage]["nodiag"]);</script></option>
     </select>
     


     <select name="upanddown" id="uand" style="margin-left:10px" onchange="if(document.getElementById("uand").options[1].selected==true && document.getElementById("diag").options[1].selected==true) document.getElementById("diag").options[2].selected=true; else if(document.getElementById("uand").options[0].selected==true && document.getElementById("diag").options[1].selected==true) document.getElementById("diag").options[0].selected=true; else if(document.getElementById("uand").options[1].selected==true && document.getElementById("diag").options[0].selected==true) document.getElementById("diag").options[2].selected=true;">
       <option value="uand"><script type="text/javascript">document.write(LANG[selectedLanguage]["uandd"]);</script></option>
       <option value="uandonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["uanddo"]);</script></option>
       <option value="nouand"><script type="text/javascript">document.write(LANG[selectedLanguage]["nouandd"]);</script></option>
     </select>
     


     <script type="text/javascript">document.write(LANG[selectedLanguage]["wlplace"]);</script>: <select id="wordListPlacement">
       <option value="right"><script type="text/javascript">document.write(LANG[selectedLanguage]["right"]);</script></option>
       <option value="bottom"><script type="text/javascript">document.write(LANG[selectedLanguage]["bottom"]);</script></option>
     </select>
     


     <input type="checkbox" id="sortAlpha" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]["sort"]);</script>

     <input type="checkbox" id="lowerCase" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]["lower"]);</script>

     <input type="checkbox" id="useLetters" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]["wordlist"]);</script>

   <script type="text/javascript">document.write("<input type="button" value="Return" id="blahblah" style="visibility:hidden;width:50px;" />  <input type="button" value=""+LANG[selectedLanguage]["create"]+"" id="create" onmouseup="reload=0;" onclick="if(document.getElementById(\"inputWords\").value==\"\" && !document.getElementById(\"numWords\").value) { alert(\""+LANG[selectedLanguage]["nowords"]+"\"); } else { if(d.getElementById(\"manually\").checked) manuallyPlace(); else createPuzzle(1); }" style="width:100px;" />  <input type="button" value=""+LANG[selectedLanguage]["save"]+"" onclick="saveSettings();" style="width:100px;" />  <input type="button" value=""+LANG[selectedLanguage]["return"]+"" id="returnToGame" style="visibility:hidden;width:50px;" onclick="returnToGame();" />");</script>
   


   <select id="mainLang" onchange="changeLanguages();" style="font-size:11px;">
     <script type="text/javascript">
     </script>
   </select>

<a href="http://jswordsearch.sourceforge.net/">jsWordsearch 0.4</a>

   <textarea cols="40" rows="3" id="saveGameData"></textarea> <script type="text/javascript">document.write("<input type="button" value=""+LANG[selectedLanguage]["cont"]+"" onclick="document.getElementById(\"puzzle\").style.display=\"block\";document.getElementById(\"saveGameForm\").style.display=\"none\";puzzleActive=1;" />");</script>

</body> </html>

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/jswordsearch_0.4.zip">jswordsearch_0.4.zip( 25 k)</a>

Tab from gwidgets_0.8.0

<A href="http://www.wbex.ru/Code/JavaScriptDownload/gwidgets_0.8.0.zip">gwidgets_0.8.0.zip( 44 k)</a>

1. <A href="/Code/JavaScript/GUI-Components/TabManager1.htm">Tab Manager 1</a> <A href="/Code/JavaScript/GUI-Components/TabManager1.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/TabManager2.htm">Tab Manager 2</a> <A href="/Code/JavaScript/GUI-Components/TabManager2.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/Tabcontrolforagame.htm">Tab control for a game</a> <A href="/Code/JavaScript/GUI-Components/Tabcontrolforagame.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/TabsinJavaScript.htm">Tabs in JavaScript</a> <A href="/Code/JavaScript/GUI-Components/TabsinJavaScript.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/Tabwithcontrolinside.htm">Tab with control inside</a> <A href="/Code/JavaScript/GUI-Components/Tabwithcontrolinside.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/Slidetab.htm">Slide tab</a> 7. <A href="/Code/JavaScript/GUI-Components/Tabcontrol.htm">Tab control</a> 8. <A href="/Code/JavaScript/GUI-Components/FourTabwithdifferentstyle.htm">Four Tab with different style</a> 9. <A href="/Code/JavaScript/GUI-Components/XPTabinJavaScript.htm">XP Tab in JavaScript</a> 10. <A href="/Code/JavaScript/GUI-Components/Twotabinonepage.htm">Two tab in one page</a> 11. <A href="/Code/JavaScript/GUI-Components/HTMLstyletab.htm">HTML style tab</a> 12. <A href="/Code/JavaScript/GUI-Components/Calendarintab.htm">Calendar in tab</a> <A href="/Code/JavaScript/GUI-Components/Calendarintab.htm"></a> 13. <A href="/Code/JavaScript/GUI-Components/Tabinjavascript.htm">Tab in javascript</a> <A href="/Code/JavaScript/GUI-Components/Tabinjavascript.htm"></a> 14. <A href="/Code/JavaScript/GUI-Components/OnetabEasyTabs12.htm">One tab: Easy Tabs 1.2</a> 15. <A href="/Code/JavaScript/GUI-Components/TwotabEasyTabs12.htm">Two tab: Easy Tabs 1.2</a> 16. <A href="/Code/JavaScript/GUI-Components/threetabsEasyTabs12.htm">three tabs: Easy Tabs 1.2</a> 17. <A href="/Code/JavaScript/GUI-Components/TabberExample.htm">Tabber Example</a> 18. <A href="/Code/JavaScript/GUI-Components/Nestedtabandtabchangedevent.htm">Nested tab and tab changed event</a> 19. <A href="/Code/JavaScript/GUI-Components/Setacookiewhenevertheyouclickthetabsoifyouleavethepageandreturnthesametabremainsselected.htm">Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected</a>

Tab in javascript

<A href="http://www.wbex.ru/Code/JavaScriptDownload/LWcomponents_0_4.zip">LWcomponents_0_4.zip( 29 k)</a>

1. <A href="/Code/JavaScript/GUI-Components/TabManager1.htm">Tab Manager 1</a> <A href="/Code/JavaScript/GUI-Components/TabManager1.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/TabManager2.htm">Tab Manager 2</a> <A href="/Code/JavaScript/GUI-Components/TabManager2.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/Tabcontrolforagame.htm">Tab control for a game</a> <A href="/Code/JavaScript/GUI-Components/Tabcontrolforagame.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/TabsinJavaScript.htm">Tabs in JavaScript</a> <A href="/Code/JavaScript/GUI-Components/TabsinJavaScript.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/Tabwithcontrolinside.htm">Tab with control inside</a> <A href="/Code/JavaScript/GUI-Components/Tabwithcontrolinside.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/Slidetab.htm">Slide tab</a> 7. <A href="/Code/JavaScript/GUI-Components/Tabcontrol.htm">Tab control</a> 8. <A href="/Code/JavaScript/GUI-Components/FourTabwithdifferentstyle.htm">Four Tab with different style</a> 9. <A href="/Code/JavaScript/GUI-Components/XPTabinJavaScript.htm">XP Tab in JavaScript</a> 10. <A href="/Code/JavaScript/GUI-Components/Twotabinonepage.htm">Two tab in one page</a> 11. <A href="/Code/JavaScript/GUI-Components/HTMLstyletab.htm">HTML style tab</a> 12. <A href="/Code/JavaScript/GUI-Components/Calendarintab.htm">Calendar in tab</a> <A href="/Code/JavaScript/GUI-Components/Calendarintab.htm"></a> 13. <A href="/Code/JavaScript/GUI-Components/Tabfromgwidgets080.htm">Tab from gwidgets_0.8.0</a> <A href="/Code/JavaScript/GUI-Components/Tabfromgwidgets080.htm"></a> 14. <A href="/Code/JavaScript/GUI-Components/OnetabEasyTabs12.htm">One tab: Easy Tabs 1.2</a> 15. <A href="/Code/JavaScript/GUI-Components/TwotabEasyTabs12.htm">Two tab: Easy Tabs 1.2</a> 16. <A href="/Code/JavaScript/GUI-Components/threetabsEasyTabs12.htm">three tabs: Easy Tabs 1.2</a> 17. <A href="/Code/JavaScript/GUI-Components/TabberExample.htm">Tabber Example</a> 18. <A href="/Code/JavaScript/GUI-Components/Nestedtabandtabchangedevent.htm">Nested tab and tab changed event</a> 19. <A href="/Code/JavaScript/GUI-Components/Setacookiewhenevertheyouclickthetabsoifyouleavethepageandreturnthesametabremainsselected.htm">Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected</a>

Tab Manager 1

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>DynAPI Examples - Tab Manager 1</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api.ext.TabManager"); </script> <style type="text/css"> td { font:10px Helvetica; background-color:#dddddd; } .center { text-align:center; } </style> <script language="Javascript"> // tab manager listener var tmListener={

 onblur:function(e) {
   var o=e.getSource();
   o.setBgColor("#cccccc");
 },
 onfocus:function(e) {
   var o=e.getSource();
   o.setBgColor("#aaaaaa");
 },
 onsubmit:function(e) {
   var o=e.getSource();
   o.setBgColor("#eeeeee");
   o.callSubmitFn();
 }

} // default tab attributes function Tab(html,x,id) {

 this.base=DynLayer;
 this.base(html,x,1,50,16,"#cccccc");
 if(id) this.setID(id)
 this.setClass("center");

} Tab.prototype=new DynLayer(); // example 1 var e1=dynapi.document.addChild(new DynLayer(null,null,null,309,48)); // menubar 1 var m1=e1.addChild(new DynLayer(null,1,1,309,19,"#666666")); m1.addChild(new Tab("<< First",1),"tab1").addSubmitFn("alert("First")"); m1.addChild(new Tab("< Prev",52),"tab2").addSubmitFn("alert("Prev")"); m1.addChild(new Tab("Add",103),"tab3").addSubmitFn("alert("Add")"); m1.addChild(new Tab("Submit",154),"tab4").addSubmitFn("alert("Submit")"); m1.addChild(new Tab("Next >",205),"tab5").addSubmitFn("alert("Next")"); m1.addChild(new Tab("Last >>",256),"tab6").addSubmitFn("alert("Last")"); m1.createTabManager(); m1.addTabListeners(tmListener) m1.tab1.setBgColor("#aaaaaa"); var FORM=null; var e4=dynapi.document.addChild(new DynLayer(null,null,null,400,150)); function getForm() {

 if(FORM) return;
 FORM=TabManager.getForm(e4);
 var html4="When using the [Tab] key in Mozilla this text field prevents default tab focus. It may be <a href="" onclick="FORM.setVisible(false);return false;">hidden</a> (unfortunately the cursor is still visible).
When using NS4 on Linux with broken key events make sure this text field is <a href="" onclick="FORM.setVisible(true);return false;">visible</a> and click in the field to force focus and allow key input."
 e4.addChild(new DynLayer(html4,30,0,350,100));

} </script> </head> <body bgcolor="#eeeeee">

Tab Manager Demonstration 1

In NS4 click in the window and use the numeric keypad (Num Lock) arrow keys to tab around the menus and the space key to select.
For other browsers use the standard arrow keys to tab around the menus and the enter or space key to select.
On some browsers it is possible to use the [SHIFT+Tab] and [Tab] keys to move left and right repectively.
To prevent default tab focus when using the [Tab] key in Mozilla or when trying to use NS4 on Linux with broken key events, click <a href="" onclick="getForm();return false;">here</a>.

</body> </html>

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Tab Manager 2

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>DynAPI Examples - Tab Manager 2</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.functions"); dynapi.library.include("dynapi.util.DataSource"); dynapi.library.include("dynapi.gui.FocusManager"); dynapi.library.include("dynapi.api.ext.TabManager"); </script> <style type="text/css"> td { font:10px Helvetica; background:#dddddd; } .center { text-align:center; } </style> <script language="Javascript"> // data source error function function dsConfirm(ds,err) {

 var elm,t,c;
 elm=ds.ioelement.getScope();
 // IE only - used to display page content of a failed response.
 if(!(dynapi.ua.ie && elm.document && !elm.document._tranState)) t="";
 else t="------\n"+elm.document.body.innerText;
 c=confirm(err+"\n\nWould you like to retry the operation?\n\n"+t);
 if(c) ds.retry();

}; // data source listener var dsListener={}; dsListener.onalert=function(e,err) {

 var ds=e.getSource();
 if(err.indexOf("DataSource: Server Timeout")>=0) dsConfirm(ds,err);

}; // data source callback function dsConnect(ds,s,err) {

 if(s!=true) dsConfirm(ds,err);
 else ds.moveFirst();

}; // tab manager listener var tmListener={

 onblur:function(e) {
   var o=e.getSource();
   o.setBgColor("#cccccc");
 },
 onfocus:function(e) {
   var o=e.getSource();
   o.setBgColor("#aaaaaa");
 },
 onsubmit:function(e) {
   var o=e.getSource();
   o.setBgColor("#eeeeee");
   o.callSubmitFn();
 }

} // default tab attributes function Tab(html,x,id) {

 this.base=DynLayer;
 this.base(html,x,1,50,16,"#cccccc");
 this.setClass("center");
 if(id) this.setID(id)

} Tab.prototype=new DynLayer(); // example 1 var e1=dynapi.document.addChild(new DynLayer(null,0,0,309,48)); // menubar 1 var m1=e1.addChild(new DynLayer(null,1,1,309,19,"#666666")); m1.addChild(new Tab("<< First",1),"tab1").addSubmitFn("ds1.moveFirst()"); m1.addChild(new Tab("< Prev",52),"tab2").addSubmitFn("ds1.movePrev()"); m1.addChild(new Tab("Add",103)); // tab 3 m1.addChild(new Tab("Submit",154)); // tab 4 m1.addChild(new Tab("Next >",205),"tab5").addSubmitFn("ds1.moveNext()"); m1.addChild(new Tab("Last >>",256),"tab6").addSubmitFn("ds1.moveLast()"); m1.createTabManager(m1.tab1,m1.tab2,m1.tab5,m1.tab6); // exclude tab3 & tab4 m1.addTabListeners(tmListener) m1.tab1.onCreate(function() { this.setFocus(true); } ); // data source 1 var ds1=new DataSource(); ds1.setSource("dynapi.util.datasource-testfile.html","GET"); ds1.connect(dsConnect); ds1.addEventListener(dsListener); e1.addChild(new DynLayer(null,1,21,17,25,"#cccccc"),"dri").setDataSource(ds1,"dataRowIndex"); e1.addChild(new DynLayer(null,20,21,80,25,"#cccccc")).setDataSource(ds1,"user_id"); e1.addChild(new DynLayer(null,102,21,205,25,"#cccccc")).setDataSource(ds1,"full_name"); e1.dri._setDSValue=function(d) { this.setHTML((d+1)+""); } // example 2 var e2=dynapi.document.addChild(new DynLayer(null,0,0,410,48)); // menubar 2 var m2=e2.addChild(new DynLayer(null,0,0,410,19,"#666666")); m2.addChild(new Tab("<< First",1,"ds2-moveFirst"),"t1"); m2.addChild(new Tab("<< -10",52),"t2"); m2.addChild(new Tab("< Prev",103,"ds2-movePrev"),"t3"); m2.addChild(new Tab("Add",154)); m2.addChild(new Tab("Submit",205)); m2.addChild(new Tab("Next >",256,"ds2-moveNext"),"t4"); m2.addChild(new Tab("+10 >>",307),"t5"); m2.addChild(new Tab("Last >>",358,"ds2-moveLast"),"t6"); m2.t2.addSubmitFn(function() { ds2.setRecordPosition(I2-10); }); m2.t5.addSubmitFn(function() { ds2.setRecordPosition(I2+10); }); // m2 tab elements t1,t3,t4,t6 will have id callbacks, "-" replaced with "." ;) m2.createTabManager(m2.t1,m2.t2,m2.t3,m2.t4,m2.t5,m2.t6); m2.addTabListeners(tmListener) // data source 2 var ds2=new DataSource(),I2=0; ds2.setSource("dynapi.util.datasource-acronyms.html","GET"); ds2.connect(dsConnect); ds2.addEventListener(dsListener); e2.addChild(new DynLayer(null,1,21,17,25,"#cccccc"),"dri").setDataSource(ds2,"dataRowIndex"); e2.addChild(new DynLayer(null,20,21,80,25,"#cccccc")).setDataSource(ds2,"mnemonic"); e2.addChild(new DynLayer(null,102,21,307,25,"#cccccc")).setDataSource(ds2,"description"); e2.dri._setDSValue=function(d) { I2=parseInt(d); this.setHTML((I2+1)+""); } // example 3 // tab manager and focus manager listener var fmListener={

 onfocus:function(e) {
   var o=e.getSource();
   o.__oldBg=o.getBgColor();
   o.setBgColor("#999999");
 },
 onblur:function(e) {
   var o=e.getSource();
   o.setBgColor(o.__oldBg);
 },
 onsubmit:function(e) { // tab manager
   var o=e.getSource();
   o.setBgColor("#eeeeee");
 }

} // default box attributes function Box(x,y,c) {

 this.base=DynLayer;
 this.base(null,x,y,50,50,c);
 this.setFocus("auto")
 this.setClass("center");

} Box.prototype=new DynLayer(); var e3=dynapi.document.addChild(new DynLayer(null,0,0,410,75)); e3.addChild(new Box(0,0,"#cccccc")); e3.addChild(new Box(80,0,"#cccccc")); e3.addChild(new Box(160,0,"#cccccc")); e3.addChild(new Box(240,0,"#cccccc")); e3.addChild(new Box(320,0,"#cccccc")); e3.addChild(new Box(360,25,"#bbbbbb")); e3.addChild(new Box(280,25,"#bbbbbb")); e3.addChild(new Box(200,25,"#bbbbbb")); e3.addChild(new Box(120,25,"#bbbbbb")); e3.addChild(new Box(40,25,"#bbbbbb")); e3.createTabManager(); // all children e3.addTabListeners(fmListener); // hidden information var e4=dynapi.document.addChild(new DynLayer(null,null,null,380,150)); FORM=null; function getForm() {

 if(FORM) return;
 FORM=TabManager.getForm(e4);
 var html4="When using the [Tab] key in Mozilla this text field prevents default tab focus. It may be <a href="" onclick="FORM.setVisible(false);return false;">hidden</a> (unfortunately the cursor is still visible).
When using NS4 on Linux with broken key events make sure this text field is <a href="" onclick="FORM.setVisible(true);return false;">visible</a> and click in the field to force focus and allow key input."
 e4.addChild(new DynLayer(html4,30,0,350,100));

} </script> </head> <body bgcolor="#eeeeee">

Tab Manager Demonstration 2

Names Datasource
<script>dynapi.document.insertChild(e1,"relative");</script> <p>Acronyms Datasource
<script>dynapi.document.insertChild(e2,"relative");</script> <p>Tab Manager and Focus Manager
<script>dynapi.document.insertChild(e3,"relative");</script> </td>

In NS4 click in the window and use the numeric keypad (Num Lock) arrow keys to tab around the menus and the space key to select.
For other browsers use the numeric keypad or standard arrow keys to tab around the menus and the enter or space key to select.
On some browsers it is possible to use the [SHIFT+Tab] and [Tab] keys to move left and right repectively. Use up and down arrow keys to move between the menus as before.
To prevent default tab focus when using the [Tab] key in Mozilla or when trying to use NS4 on Linux with broken key events, click <a href="" onclick="getForm();return false;">here</a>.

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Tabs in JavaScript

   <source lang="html4strict">

<html> <head> <style type="text/css"> /* tabs styles, based on http://www.alistapart.ru/articles/slidingdoors */ DIV.tabs {

  float            : left;
  width            : 100%;
  background       : url("tab_b.gif") repeat-x bottom;
  margin-bottom    : 4px;

} DIV.tabs UL {

  margin           : 0px;
  padding-left     : 10px;
  list-style       : none;

} DIV.tabs LI, DIV.tabs FORM {

  display          : inline;
  margin           : 0px;
  padding          : 0px;

} DIV.tabs FORM {

  float            : right;

} DIV.tabs A {

  float            : left;
  background       : url("tab_r.gif") no-repeat right top;
  border-bottom    : 1px solid #84B0C7;
  font-size        : x-small;
  font-weight      : bold;
  text-decoration  : none;

} DIV.tabs A:hover {

  background-position: 100% -150px;

} DIV.tabs A:link, DIV.tabs A:visited, DIV.tabs A:active, DIV.tabs A:hover {

      color: #1A419D;

} DIV.tabs SPAN {

  float            : left;
  display          : block;
  background       : url("tab_l.gif") no-repeat left top;
  padding          : 5px 9px;
  white-space      : nowrap;

} DIV.tabs INPUT {

  float            : right;
  display          : inline;
  font-size        : 1em;

} DIV.tabs TD {

  font-size        : x-small;
  font-weight      : bold;
  text-decoration  : none;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/ DIV.tabs SPAN {float : none;} /* End IE5-Mac hack */ DIV.tabs A:hover SPAN {

  background-position: 0% -150px;

} DIV.tabs LI#current A {

  background-position: 100% -150px;
  border-width     : 0px;

} DIV.tabs LI#current SPAN {

  background-position: 0% -150px;
  padding-bottom   : 6px;

} DIV.nav {

  background       : none;
  border           : none;
  border-bottom    : 1px solid #84B0C7;

} </style> </head><body>

<a href="">Main Page</a>
<a href="">Classes</a>
<a href="">Directories</a>

<a href="">Class List</a>
<a href="">Class Members</a>

</body> </html>

 </source>

Tab with control inside

   <source lang="html4strict">

 //Definindo linguagem - pt = portugues. Mensagens de erro serao apresentadas nesta lingua
 lang = "pt";
 //criando o documento base para adicionar os objetos
 docbody      = new JsDocument("docbody");
 //Funcoes extras para mostrar a adicao de eventos aos objetos:
 //Esta funcaum eh adicionada ao evento change do combobox
 function testeChange(e)
 {
   alert("mudou");
 }
 //funcao utilizada pelos botoes para transferir itens de um listbox para outro
 function transfer1_2()
 {
   transferListItens(listbox1, listbox2);
 }
 //funcao utilizada pelos botoes para transferir itens de um listbox para outro
 function transfer2_1()
 {
   transferListItens(listbox2, listbox1);
 }
 //funcao so para retornar o valor atual do calendario
 function teste(e)
 {
   alert(cal.getValue());
 }
 
 //funcao para ver se o treeview esta retornando ok
 function toolbarClick()
 {
   alert("Clicou no toolbar");
 }
 //funcaum para adicionar itens no listview
 function lstvaddItems()
 {
   //gerador de valor randomico para o nome dos objetos criados
   itemname = randomizer();
   //Menu do Item
   menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
   menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
   menu_adicionar.setValue("Adicionar");
   menu_adicionar.setIcon("images/new.gif");
   menu_adicionar.setEvent("click", lstvaddItems);
   menu.addItem(menu_adicionar);
   menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
   menu_remover.setValue("Remover");
   menu_remover.setIcon("images/delete.gif");
   menu_remover.setEvent("click", lstvdelItems);
   menu_remover.setAttribute("lstparent",itemname);
   menu.addItem(menu_remover);
   listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
   list_teste.addItem(listviewitem);
   check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
   check.setLabel("Teste");
   check.setValue("true");
   listviewitem.addItem(randomizer(),"",true);
   listviewitem.addItem(check);
   listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
   listviewitem.setMenu(menu);
 }
 //funcaum para remover itens do listview
 function lstvdelItems(e)
 {  
   if (browserType == "ie")
   {
     e = window.event;
     obj = e.srcElement;
   }
   else
   {
     obj = e.target;
   }
   var lsitem = eval(obj.lstparent);
   list_teste.delItem(lsitem);
   temMudanca = true;
 }
 
 function treeaddItems()
 {
   //gerador de valor randomico para o nome dos objetos criados
   itemname = randomizer();
   //Menu do Item
   menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
   menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
   menu_adicionar.setValue("Adicionar");
   menu_adicionar.setIcon("images/new.gif");
   menu_adicionar.setEvent("click", treeaddItems);
   menu.addItem(menu_adicionar);
   menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem("" + itemname + "_menu_adicionarsub")");
   menu_adicionarsub.setValue("Adicionar SubItem");
   menu_adicionarsub.setIcon("images/new.gif");
   menu_adicionarsub.setEvent("click", treeaddSubItems);
   menu_adicionarsub.setAttribute("lstparent",itemname);
   menu.addItem(menu_adicionarsub);
   menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
   menu_remover.setValue("Remover");
   menu_remover.setIcon("images/delete.gif");
   menu_remover.setEvent("click", treedelItems);
   menu_remover.setAttribute("lstparent",itemname);
   menu.addItem(menu_remover);
   listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
   tree_teste.addItem(listviewitem);
   check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
   check.setLabel("Teste");
   check.setValue("true");
   listviewitem.addItem(randomizer(),"",true);
   listviewitem.addItem(check);
   listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
   listviewitem.setMenu(menu);
 }
 
 function treeaddSubItems(e)
 {
   if (browserType == "ie")
   {
     e = window.event;
     obj = e.srcElement;
   }
   else
   {
     obj = e.target;
   }
   var lsitem = eval(obj.lstparent);
   
   //gerador de valor randomico para o nome dos objetos criados
   itemname = randomizer();
   //Menu do Item
   menu = eval(itemname + "_menu = new JsMenu(""+itemname+"_menu");");
   menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem("" + itemname + "_menu_adicionar")");
   menu_adicionar.setValue("Adicionar");
   menu_adicionar.setIcon("images/new.gif");
   menu_adicionar.setEvent("click", treeaddItems);
   menu.addItem(menu_adicionar);
   menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem("" + itemname + "_menu_adicionarsub")");
   menu_adicionarsub.setValue("Adicionar SubItem");
   menu_adicionarsub.setIcon("images/new.gif");
   menu_adicionarsub.setEvent("click", treeaddSubItems);
   menu_adicionarsub.setAttribute("lstparent",itemname);
   menu.addItem(menu_adicionarsub);
   menu_remover = eval(itemname + "_menu_remover = new JsMenuItem("" + itemname + "_menu_remover")");
   menu_remover.setValue("Remover");
   menu_remover.setIcon("images/delete.gif");
   menu_remover.setEvent("click", treedelItems);
   menu_remover.setAttribute("lstparent",itemname);
   menu.addItem(menu_remover);
   listviewitem = eval (itemname + " = new JsListViewItem(""+itemname+"");");
   lsitem.addItem(listviewitem);
   check = eval ("check_test"+itemname+" = new JsCheckBox("check_test"+itemname+"")");
   check.setLabel("Teste");
   check.setValue("true");
   listviewitem.addItem(randomizer(),"",true);
   listviewitem.addItem(check);
   listviewitem.addItem("Vai!!! Da um duplo clique logo!","",true);
   listviewitem.setMenu(menu);
 }
 
 function treedelItems(e)
 {
   if (browserType == "ie")
   {
     e = window.event;
     obj = e.srcElement;
   }
   else
   {
     obj = e.target;
   }
   
   var lsitem = eval(obj.lstparent);
   lsitem.parent.delItem(lsitem);
   temMudanca = true;
 }
 //MenuBar
 menubar = new JsMenuBar("menubar");
 menubaritem1 = new JsMenu("menubaritem1");
 menubaritem2 = new JsMenu("menubaritem2");
 submenubaritem2 = new JsMenu("submenubaritem2");
 menubaritemsubitem1_1 = new JsMenuItem("menubaritemsubitem1_1");
 menubaritemsubitem1_2 = new JsMenuItem("menubaritemsubitem1_2");
 menubaritemsubitem1_3 = new JsMenuItem("menubaritemsubitem1_3");
 menubaritemsubitem1_4 = new JsMenuItem("menubaritemsubitem1_4");
 menubaritemsubitem2_1 = new JsMenuItem("menubaritemsubitem2_1");
 menubaritemsubitem2_2 = new JsMenuItem("menubaritemsubitem2_2");
 menubaritemsubitem2_3 = new JsMenuItem("menubaritemsubitem2_3");
 menubaritemsubitem2_4 = new JsMenuItem("menubaritemsubitem2_4");
 submenubaritemsubitem2_1 = new JsMenuItem("submenubaritemsubitem2_1");
 submenubaritemsubitem2_2 = new JsMenuItem("submenubaritemsubitem2_2");
 submenubaritemsubitem2_3 = new JsMenuItem("submenubaritemsubitem2_3");
 submenubaritemsubitem2_4 = new JsMenuItem("submenubaritemsubitem2_4");
 menubaritem1.setValue("Menu 1");
 menubaritemsubitem1_1.setValue("Item 1");
 menubaritemsubitem1_2.setValue("Item 2");
 menubaritemsubitem1_3.setValue("Item 3");
 menubaritemsubitem1_4.setValue("Item 4");
 menubaritem2.setValue("Menu 2");
 menubaritemsubitem2_1.setValue("Item 1");
 menubaritemsubitem2_2.setValue("Item 2");
 menubaritemsubitem2_3.setValue("Item 3");
 menubaritemsubitem2_4.setValue("Item 4");
 submenubaritem2.setValue("SubMenu 2");
 submenubaritemsubitem2_1.setValue("SubItem 1");
 submenubaritemsubitem2_2.setValue("SubItem 2");
 submenubaritemsubitem2_3.setValue("SubItem 3");
 submenubaritemsubitem2_4.setValue("SubItem 4");
 menubar.addItem(menubaritem1);
 menubar.addItem(menubaritem2);
 menubaritem1.addItem(menubaritemsubitem1_1);
 menubaritem1.addItem(menubaritemsubitem1_2);
 menubaritem1.addItem(menubaritemsubitem1_3);
 menubaritem1.addItem(menubaritemsubitem1_4);
 menubaritem2.addItem(menubaritemsubitem2_1);
 menubaritem2.addItem(menubaritemsubitem2_2);
 menubaritem2.addItem(menubaritemsubitem2_3);
 menubaritem2.addItem(menubaritemsubitem2_4);
 menubaritem2.addItem(submenubaritem2);
 submenubaritem2.addItem(submenubaritemsubitem2_1);
 submenubaritem2.addItem(submenubaritemsubitem2_2);
 submenubaritem2.addItem(submenubaritemsubitem2_3);
 submenubaritem2.addItem(submenubaritemsubitem2_4);
 docbody.addItem(menubar);
 //Toolbar
 toolbar = new JsToolBar("toolbar");
 toolbarbt1 = new JsToolBarButton("toolbarbt1");
 toolbarbt2 = new JsToolBarButton("toolbarbt2");
 toolbarbt3 = new JsToolBarButton("toolbarbt3");
 toolbarbt1.setSource("images/filenew.gif");
 toolbarbt2.setSource("images/fileopen.gif");
 toolbarbt3.setSource("images/trash.gif");
 
 toolbarbt1.setEvent("click",toolbarClick);
 toolbar.addItem(toolbarbt1);
 toolbar.addItem(toolbarbt2);
 toolbar.addDiv();
 toolbar.addItem(toolbarbt3);
 docbody.addItem(toolbar);
 //Grid principal, e de conteudo, que contera o tab
 //Serve pricipalmente para fazer o alinhamento dos elementos na tela
 maingrid = new JsWidgetGrid("grid");
 maingrid.setHeight(300);
 maingrid.addRow();
 maingrid.addCell("100%","10","center","top");
 maingrid.addRow();
 maingrid.addCell("100%","","center","top");
 docbody.addItem(maingrid);
 contentgrid = new JsWidgetGrid("grid");
 contentgrid.setWidth("95%");
 contentgrid.addRow();
 contentgrid.addCell("100%","","","top");
 maingrid.addItem(contentgrid);
 //Exemplo de tab
 tab_teste = new JsTab("tab_teste");
 tab_teste.addTab("Listview e TreeView (menu de contexto)");
 tab_teste.addTab("Combobox e Lineedit");
 tab_teste.addTab("Listbox e botao");
 tab_teste.addTab("Calendario e dateedit");
 tab_teste.setWidth("100%");
 tab_teste.setHeight("450");
 contentgrid.addItem(tab_teste);
 //Exemplo de listview com menu de contexto
 adigenmenu      = new JsMenu("adigenmenu");
 adigenmenuitem    = new JsMenuItem("adigenmenuitem");
 adigenmenuitem.setValue("Adicionar");
 adigenmenuitem.setIcon("images/new.gif");
 adigenmenuitem.setEvent("click", lstvaddItems);
 adigenmenu.addItem(adigenmenuitem);
 list_teste = new JsListView("list_teste");
 list_teste.setHeight(190)
 list_teste.addColumn("Coluna 1",200);
 list_teste.addColumn("Coluna 2",300);
 list_teste.addColumn("Coluna 3",400);
 
 list_label = new JsLabel("list_label");
 list_label.setValue("ListView");
 list_label.setHeight(30);
 list_teste.setMenu(adigenmenu);
 tab_teste.addItemToTab(list_label,0);
 tab_teste.addItemToTab(list_teste,0);
 
 //Exemplo de TreeView com menu de contexto
 adigentreemenu      = new JsMenu("adigentreemenu");
 adigentreemenuitem    = new JsMenuItem("adigentreemenuitem");
 adigentreemenuitem.setValue("Adicionar");
 adigentreemenuitem.setIcon("images/new.gif");
 adigentreemenuitem.setEvent("click", treeaddItems);
 adigentreemenu.addItem(adigentreemenuitem);
 
 tree_teste = new JsListView("tree_teste");
 tree_teste.setTreeView();
 tree_teste.setHeight(190)
 tree_teste.addColumn("Coluna 1",200);
 tree_teste.addColumn("Coluna 2",300);
 tree_teste.addColumn("Coluna 3",400);
 
 tree_label = new JsLabel("tree_label");
 tree_label.setValue("TreeView");
 tree_label.setHeight(30);
 
 tree_teste.setMenu(adigentreemenu);
 
 tab_teste.addItemToTab(tree_label,0);
 tab_teste.addItemToTab(tree_teste,0);
 //Exemplo de lineedit
 //criamos um grid para distribuir melhor os elementos na tela
 lineeditgrid = new JsWidgetGrid("lineeditgrid");
 lineeditgrid.setHeight(60);
 //label 1
 label1 = new JsLabel("label1");
 label2 = new JsLabel("label2");
 lineedit1 = new JsLineEdit("lineedit1");
 lineedit2 = new JsLineEdit("lineedit2");
 label1.setValue("Label 1");
 label2.setValue("Label 2");
 lineeditgrid.addRow();
 lineeditgrid.addCell("60");
 lineeditgrid.addItem(label1);
 lineeditgrid.addCell();
 lineeditgrid.addItem(lineedit1);
 lineeditgrid.addRow();
 lineeditgrid.addCell("60");
 lineeditgrid.addItem(label2);
 lineeditgrid.addCell();
 lineeditgrid.addItem(lineedit2);
 tab_teste.addItemToTab(lineeditgrid,1);
 //Exemplo de combobox
 combobox_teste = new JsComboBox("combobox_teste");
 for (var i=1; i < 20; i++)
   combobox_teste.addItem(i, "test - " + i, "images/user_small.gif");
 combobox_teste.setEvent("change", testeChange);
 tab_teste.addItemToTab(combobox_teste,1);
 //listbox example
 lsitboxgrid = new JsWidgetGrid("lsitboxgrid");
 listbox_bt1 = new JsPushButton("listbox_bt1");
 listbox_bt1.setValue(">>");
 listbox_bt1.setEvent("click", transfer1_2);
 listbox_bt1.setWidth("50");
 listbox_bt2 = new JsPushButton("listbox_bt2");
 listbox_bt2.setValue("<<");
 listbox_bt2.setEvent("click", transfer2_1);
 listbox_bt2.setWidth("50");
 listbox1 = new JsListBox("listbox1");
 listbox1.setHeight("300");
 listbox1.setWidth("100%");
 listbox2 = new JsListBox("listbox2");
 listbox2.setHeight("300");
 listbox2.setWidth("100%");
 for (var i=0; i < 20; i++)
   listbox1.addItem("test - " + i, "","");
 lsitboxgrid.addRow();
 lsitboxgrid.addCell("45%");
 lsitboxgrid.addItem(listbox1);
 lsitboxgrid.addCell(10);
 lsitboxgrid.addCell(50,null,"center");
 lsitboxgrid.addItem(listbox_bt1);
 lsitboxgrid.addItem(listbox_bt2);
 lsitboxgrid.addCell(10);
 lsitboxgrid.addCell("45%");
 lsitboxgrid.addItem(listbox2);
 tab_teste.addItemToTab(lsitboxgrid,2);
 //Calendario
 cal    = new JsCalendar("cal");
 data  = new JsDateEdit("data");
 cal.setEvent("click", teste);
 tab_teste.addItemToTab(data,3);
 tab_teste.addItemToTab(cal,3);
 
 //for (i=0;i<50;i++)
   //lstvaddItems();

</script> </html>

 </source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/jsobjects.zip">jsobjects.zip( 366 k)</a>

three tabs: Easy Tabs 1.2

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Easy Tabs 1.2 - presented by Kollermedia.at</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:11px;} /*Example for a Menu Style*/ .menu {background-color:#008bd3;border-bottom:1px solid #d7d7d7; height:23px;width:300px;} .menu ul {margin:0px; padding:0px; list-style:none; text-align:center;} .menu li {display:inline; line-height:23px;} .menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; } .menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold; position:relative;}

tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6, #contentthree1, #contentthree2, #contentthree3 {border:1px solid #ececec; width:298px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}

</style>

/

//EASY TABS 1.2 - MENU SETTINGS //Set the id names of your tablinks (without a number at the end) var tablink_idname = new Array("tablink","anotherlink", "linkthree") //Set the id names of your tabcontentareas (without a number at the end) var tabcontent_idname = new Array("tabcontent","anothercontent", "contentthree") //Set the number of your tabs in each menu var tabcount = new Array("4","6","3") //Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load , Menu 3 -> Tab 1 visible on load) var loadtabs = new Array("2","5","1") //Set the Number of the Menu which should autochange (if you dont"t want to have a change menu set it to 0) var autochangemenu = 2; //the speed in seconds when the tabs should change var changespeed = 2; //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes var stoponhover = 1; //END MENU SETTINGS

/*Swich EasyTabs Functions - no need to edit something here*/ function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className="tab"+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = "none";}document.getElementById(tablink_idname[menunr]+active).className="tab"+active+" tabactive";document.getElementById(tabcontent_idname[menunr]+active).style.display = "block";}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;} window.onload=function(){ var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount); if (autochangemenu!=0){start_autochange();} } </script> </head>

<body>

Easy Tabs 1.2 - Example with 2 normal and 1 changing Menu

<a href="#" onmouseover="easytabs("1", "1");" onfocus="easytabs("1", "1");" onclick="return false;" title="" id="tablink1">Tab 1</a>
<a href="#" onmouseover="easytabs("1", "2");" onfocus="easytabs("1", "2");" onclick="return false;" title="" id="tablink2">Tab 2 </a>
<a href="#" onmouseover="easytabs("1", "3");" onfocus="easytabs("1", "3");" onclick="return false;" title="" id="tablink3">Tab 3 </a>
<a href="#" onmouseover="easytabs("1", "4");" onfocus="easytabs("1", "4");" onclick="return false;" title="" id="tablink4">Tab 4 </a>

Tabcontent 1

Tabcontent 2

Tabcontent 3

Tabcontent 4

<a href="#" onmouseover="easytabs("2", "1");" onfocus="easytabs("2", "1");" onclick="return false;" title="" id="anotherlink1">Tab 1</a>
<a href="#" onmouseover="easytabs("2", "2");" onfocus="easytabs("2", "2");" onclick="return false;" title="" id="anotherlink2">Tab 2</a>
<a href="#" onmouseover="easytabs("2", "3");" onfocus="easytabs("2", "3");" onclick="return false;" title="" id="anotherlink3">Tab 3</a>
<a href="#" onmouseover="easytabs("2", "4");" onfocus="easytabs("2", "4");" onclick="return false;" title="" id="anotherlink4">Tab 4</a>
<a href="#" onmouseover="easytabs("2", "5");" onfocus="easytabs("2", "5");" onclick="return false;" title="" id="anotherlink5">Tab 5</a>
<a href="#" onmouseover="easytabs("2", "6");" onfocus="easytabs("2", "6");" onclick="return false;" title="" id="anotherlink6">Tab 6</a>

Tabcontent 1

Tabcontent 2

Tabcontent 3

Tabcontent 4

Tabcontent 5

Tabcontent 6

Tabcontent 1

Tabcontent 2

Tabcontent 3

<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>

Settings setted for this menu:
loadtabs = 2, 5, 1 (load tab 2 in first, tab 5 in second and tab1 in the first menu at start)
autochangemenu = 2 (set the second menu to autochange)
changespeed = 2 (change every 2 seconds)

stoponhover = 1 (stop the autochange on hover - so if you hover a tab at the autochange menu, the autochange will stop)

</body> </html>

 </source>

Two tab: Easy Tabs 1.2

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Easy Tabs 1.2 - presented by Kollermedia.at</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:11px;} /*Example for a Menu Style*/ .menu {background-color:#008bd3;border-bottom:1px solid #d7d7d7; height:23px;width:300px;} .menu ul {margin:0px; padding:0px; list-style:none; text-align:center;} .menu li {display:inline; line-height:23px;} .menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; } .menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold; position:relative;}

tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6 {border:1px solid #ececec; width:298px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}

</style>

/

//EASY TABS 1.2 - MENU SETTINGS //Set the id names of your tablinks (without a number at the end) var tablink_idname = new Array("tablink","anotherlink") //Set the id names of your tabcontentareas (without a number at the end) var tabcontent_idname = new Array("tabcontent","anothercontent") //Set the number of your tabs in each menu var tabcount = new Array("4","6") //Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load) var loadtabs = new Array("2","5") //Set the Number of the Menu which should autochange (if you dont"t want to have a change menu set it to 0) var autochangemenu = 2; //the speed in seconds when the tabs should change var changespeed = 3; //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes var stoponhover = 0; //END MENU SETTINGS

/*Swich EasyTabs Functions - no need to edit something here*/ function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className="tab"+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = "none";}document.getElementById(tablink_idname[menunr]+active).className="tab"+active+" tabactive";document.getElementById(tabcontent_idname[menunr]+active).style.display = "block";}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;} window.onload=function(){ var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount); if (autochangemenu!=0){start_autochange();} } </script> </head>

<body>

Easy Tabs 1.2 - Example with 1 normal and 1 changing Menu

<a href="#" onmouseover="easytabs("1", "1");" onfocus="easytabs("1", "1");" onclick="return false;" title="" id="tablink1">Tab 1</a>
<a href="#" onmouseover="easytabs("1", "2");" onfocus="easytabs("1", "2");" onclick="return false;" title="" id="tablink2">Tab 2 </a>
<a href="#" onmouseover="easytabs("1", "3");" onfocus="easytabs("1", "3");" onclick="return false;" title="" id="tablink3">Tab 3 </a>
<a href="#" onmouseover="easytabs("1", "4");" onfocus="easytabs("1", "4");" onclick="return false;" title="" id="tablink4">Tab 4 </a>

Tabcontent 1

Tabcontent 2

Tabcontent 3

Tabcontent 4

<a href="#" onmouseover="easytabs("2", "1");" onfocus="easytabs("2", "1");" onclick="return false;" title="" id="anotherlink1">Tab 1</a>
<a href="#" onmouseover="easytabs("2", "2");" onfocus="easytabs("2", "2");" onclick="return false;" title="" id="anotherlink2">Tab 2</a>
<a href="#" onmouseover="easytabs("2", "3");" onfocus="easytabs("2", "3");" onclick="return false;" title="" id="anotherlink3">Tab 3</a>
<a href="#" onmouseover="easytabs("2", "4");" onfocus="easytabs("2", "4");" onclick="return false;" title="" id="anotherlink4">Tab 4</a>
<a href="#" onmouseover="easytabs("2", "5");" onfocus="easytabs("2", "5");" onclick="return false;" title="" id="anotherlink5">Tab 5</a>
<a href="#" onmouseover="easytabs("2", "6");" onfocus="easytabs("2", "6");" onclick="return false;" title="" id="anotherlink6">Tab 6</a>

Tabcontent 1

Tabcontent 2

Tabcontent 3

Tabcontent 4

Tabcontent 5

Tabcontent 6

<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>

Settings setted for this menu:
loadtabs = 2, 5 (load tab 2 in first menu and tab 5 in second menu at start)
autochangemenu = 2 (set the second menu to autochange - if you want the first menu to autochange just set this to 1)
changespeed = 3 (change every 3 seconds)

stoponhover = 0 (don"t stop the autochange on hover)

</body> </html>

 </source>

Two tab in one page

   <source lang="html4strict">

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

/* 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("

");

   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("<style>.webfx-menu-bar a {padding-top:3px;}</style>");

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("");

   this.writeBottomMenuBar();
 },
 writeDesignedByEdger  :  function () {
   if (ie && document.body.currentStyle.writingMode != null)

document.write("

Page designed and maintained by " +

         "<a href="mailto:erik@eae.net">Erik Arvidsson</a> & " +

"<a href="mailto:eae@eae.net">Emil A Eklund</a>.

");

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

 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;

} </style>

/

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

 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>

 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>

 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;

} </script> </head> <body> <script type="text/javascript"> //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);

/

} </script>

<a onclick="addtab("A great site!","tabPagexx1","http://webfx.eae.net");">ADD A WEBFX TAB</a>

General

   <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
   <iframe src="http://www.wbex.ru" style="width: 100%; height: 100%;"></iframe>

General

   <iframe src="http://www.wbex.ru" style="width: 100%; height: 100%;"></iframe>

 </source>

XP Tab in JavaScript

   <source lang="html4strict">

<!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 2 (WebFX)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 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;

} </style>

 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;

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

General

     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.

Security

     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.
     

     

     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.

Privacy

     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.

Content

     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.

</body> </html>

</source>

<script type="text/javascript">document.write(LANG[selectedLanguage]["rows"]);</script>	<input type="text" id="numRows" value="" size="2" maxlength="3" />
<script type="text/javascript">document.write(LANG[selectedLanguage]["cols"]);</script>	<input type="text" id="numCols" value="" size="2" maxlength="3" />
<script type="text/javascript">document.write(LANG[selectedLanguage]["fontsize"]);</script>	<input type="text" id="fontSize" value="" size="2" /> mm
<script type="text/javascript">document.write(LANG[selectedLanguage]["fontcolor"]);</script>	<input type="text" id="fontColor" value="" size="10" />
<script type="text/javascript">document.write(LANG[selectedLanguage]["bgcolor"]);</script>	<input type="text" id="bgColor" value="" size="10" />
<script type="text/javascript">document.write(LANG[selectedLanguage]["hlcolor"]);</script>	<input type="text" id="hlColor" value="" size="10" />
<script type="text/javascript">document.write(LANG[selectedLanguage]["gridstyle"]);</script>	<script type="text/javascript"> </script> <script type="text/javascript">document.write(LANG[selectedLanguage]["mcustom"]);</script> <script type="text/javascript">document.write(LANG[selectedLanguage]["input"]);</script>

Текущая версия на 10:43, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 10:43, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)

JavaScript DHTML/GUI Components/Tab — различия между версиями

Текущая версия на 10:43, 26 мая 2010

Содержание

Calendar in tab

Four Tab with different style

" + s + "

" + s + "

General

Security

Privacy

Content

General

Security

Nested

General

Privacy

HTML style tab

" + s + "

" + s + "

Introduction

Usage

Include the Files

The

Initialization

API

WebFXTabPane

Syntax

Parameters

Static Methods

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Static Fields

Methods

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Fields

Remarks

WebFXTabPage

Syntax

Parameters

Static Methods

Static Fields

Methods

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Fields

Remarks

Globals

Functions

Syntax

Arguments

Return Type

Syntax

Arguments

Return Type

Objects

Implementation

Check for support

WebFXTabPane