JavaScript DHTML/GUI Components/ComboBox

Содержание

1 2D Related Comboboxes
2 3D related comboboxes
3 Combobox with cell renderer
4 Linked comboboxes

2D Related Comboboxes

<HTML>
<HEAD><TITLE>Universal Related Popup Menus / Another Way</TITLE>
<BASE HREF="http://www.wbex.ru">
<STYLE>
     .saveHistory {behavior:url(#default#savehistory);}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Universal Related Select Menus - cascading popdown menus
// by Andrew King. v1.34 19990720
// Copyright (c) 1999 internet.ru LLC. All Rights Reserved.
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
//
// Originally published and documented at http://www.webreference.ru
// Contact aking@internet.ru for all other uses.
//
// Change History
// 3-3-96 code optimized, modularized, and made universal-abk
// 3-8-97 jumpPage1 and 2 consolidated into generalized func
// 3-10-97 changeMenu added jumpPage(0,0), for non-ns3 browsers
// make popup act like a live popup when no related functionality
// 8-5-97 browser detect script changed to check for option functionality
// 9-11-97 aln changed to options.length, as IE 4 does not support
// nulling out options
// 12-22-98 added SIZE att to make select lists, used named forms/elements
// 1-1-99 added getFormNum to fix netscape 2 bug (doesn"t support named fms)
//  pass formName, elementNum to relate and jmp as workaround
//  pass this.form,0 and increment instead of decrement in relate to get 
//   next form
//  assumes menu2 follows menu1 in HTML
// tested in mac ie3.01/ns2.02 (live), ns 3.01,4.05,4.5 and ie4.01 related
// 990204 - adopted a more modular/oo approach using two D arrays, thanks
//   to Jacob Berner <leo7278@hotmail.ru> for his input
// 990701 - fixed back button bug in ie4+ by resetting all forms onload-abk
//    thanks to peter belesis (pbel@internet.ru) for this fix
// 990714 - added IE5 persistence - abk pb
// 990715 - went open source, created stripped down example files - abk
// 990720 - jmp() fix getFormNum(formName);->
//     var formNum = getFormNum(formName);
//  if (v) {..} added around newCat array creation for old browsers
// 990721 - getFormNum/relate tweaks, unnec code removed, 
//     ns2.0 mac fix - getFormNum returns -1 in nested tables
//     new jmp bypasses prob - thx to thanks to Michael Guitton
//     saramaca@mail.dotcom.fr
// 990722 - var for scope added, jmp chgd to named form for ns2.02 bug-abk
if(v){a=new Array(22);}
function getFormNum (formName) {
  var formNum =-1;
  for (i=0;i<document.forms.length;i++){
    tempForm = document.forms[i];
    if (formName == tempForm) {
      formNum = i;
      break;
    }
  }
  return formNum;
}
function jmp(form, elt)
// The first parameter is a reference to the form.
{
  if (form != null) {
    with (form.elements[elt]) {
      if (0 <= selectedIndex)
        location = options[selectedIndex].value;
    }
  }
}
var catsIndex = -1;
var itemsIndex;
if (v) { // ns 2 fix
function newCat(){
  catsIndex++;
  a[catsIndex] = new Array();
  itemsIndex = 0;
}
function O(txt,url) {
  a[catsIndex][itemsIndex]=new myOptions(txt,url);
  itemsIndex++;
}
function myOptions(text,value){
  this.text = text;
  this.value = value;
}
// fill array
newCat();
O("3-D Animation","/3d/");
O("Design","/dlab/");
O("DHTML","/dhtml/");
O("E-Commerce","/ecommerce/mm/");
O("Graphics","/graphics/");
O("HTML","/html/");
O("JavaScript","/js/");
newCat();
O("Authoring","/authoring/");
O("E-Commerce","/ecommerce/");
O("Internet","/internet/");
O("Multimedia","/multimedia/");
O("Programming","/programming/");
O("Promotion","/promotion/");
newCat();
O("Domains","/services/dns/");
O("Graphics","/services/graphics/");
O("News Harvester","/headlines/nh/");
O("Reference","/services/reference/");
O("Search","/search.cgi");
O("Validation","/services/validation/");
newCat();
O("Awards","/awards.html");
O("In the News","/inthenews.html");
O("New Features","/features.html");
O("Linking Info","/link.html");
O("Lore","/lore.html");
O("Media Kit","http://www.wbex.ru/");
O("Press Releases","/press/");
O("Suggest","/cgi-bin/suggest.cgi");
} // if (v)
function relate(formName,elementNum,j) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
  formNum++; // reference next form, assume it follows in HTML
  with (document.forms[formNum].elements[elementNum]) {
    for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
    for(i=0;i<a[j].length;i++){
      options[i] = new Option(a[j][i].text,a[j][i].value); 
    }
    options[0].selected = true;
  }
 }
} else {
jmp(formName,elementNum);
}
}
// BACK BUTTON FIX for ie4+- or
// MEMORY-CACHE-STORING-ONLY-INDEX-AND-NOT-CONTENT
//
// from peter belesis:
// IE4+ remembers the index of each SELECT but NOT the CONTENTS of each
// SELECT, so it gets it wrong.
//
// it has to do with MEMORY CACHE (where form input is stored) and how
// IE stores information about SELECT menus.
//
// IE stores the selectedINDEX ONLY of the SELECT menu, not the
// CONTENTS-AT-THE-TIME-OF-SELECTION
//
// when we return to a page, it displays the default contents of each
// SELECT, grabs the stored index from cache and aligns the default
// contents to that index.
// 
// Netscape, on the other hand, seems to remember both INDEX and CONTENTS
// added ie5 persistence 990714
function IEsetup(){
  if(!document.all) return;
  IE5 = navigator.appVersion.indexOf("5.")!=-1;
  if(!IE5) {
    for (i=0;i<document.forms.length;i++) {
      document.forms[i].reset();
    }
  }
}
window.onload = IEsetup;
//-->
</SCRIPT></HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
<TR VALIGN="TOP"><TD>Choose a subject:<BR><FORM NAME="f1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form,0,this.selectedIndex)"><OPTION VALUE="/experts/">Experts<OPTION VALUE="/index2.html">Contents<OPTION VALUE="/services/">Services<OPTION VALUE="/about.html">About</SELECT><INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---&gt;</B></TD>
<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/">3-D Animation
<OPTION VALUE="/dlab/">Design
<OPTION VALUE="/dhtml/">Dynamic HTML
<OPTION VALUE="/ecommerce/mm/">E-Commerce
<OPTION VALUE="/graphics/">Graphics
<OPTION VALUE="/html/">HTML
<OPTION VALUE="/js/">JavaScript</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.wbex.ru">
</FORM></TD>
</TR>
</TABLE></CENTER>
</BODY>
</HTML>

3D related comboboxes

<HTML>
<HEAD>
<TITLE>Universal Related Popup Menus / Three Related Menus</TITLE>
<BASE HREF="http://www.wbex.ru">
<STYLE>
     .saveHistory {behavior:url(#default#savehistory);}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Universal Related Select Menus 3-D - cascading popdown menus
// (Dynamically-sized related menus using JS 1.1"s new Option cmd)
// by Andrew King. v1.34 19990720
// Copyright (c) 1999 internet.ru LLC. All Rights Reserved.
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
//
// Originally published and documented at http://www.webreference.ru
// Contact aking@internet.ru for all other uses.
//
// Change History
// 3-3-96 code optimized, modularized, and made universal-abk
// 3-8-97 jumpPage1 and 2 consolidated into generalized func
// 3-10-97 changeMenu added jumpPage(0,0), for non-ns3 browsers
// make popup act like a live popup when no related functionality
// 8-5-97 browser detect script changed to check for option functionality
// 9-11-97 aln changed to options.length, as IE 4 does not support
// nulling out options
// 12-22-98 added SIZE att to make select lists, used named forms/elements
// 1-1-99 added getFormNum to fix netscape 2 bug (doesn"t support named fms)
//  pass formName, elementNum to relate and jmp as workaround
//  pass this.form,0 and increment instead of decrement in relate to get 
//   next form
//  assumes menu2 follows menu1 in HTML
// tested in mac ie3.01/ns2.02 (live), ns 3.01,4.05,4.5 and ie4.01 related
// 990204 - adopted a more modular/oo approach using two D arrays thanks
//   to "Cyanide _7" <leo7278@hotmail.ru> for his help
// 990211 relate2 works! no text - value for second dim array
//    works! relate calls relate2 (using fromRelate kludge) for 3 related menus
// 990701 - bug fix in related select lists - click on second menu"s list,
//  get an error as there"s no selected option in first menu in a list, 
//  one fix is default to selected first menu"s option - abk
// 990701 - fixed back button bug in ie4+ by resetting all forms onload
//      fromRelate var kludge eliminated, added to relate2 as param
//    thanks to peter belesis (pbel@internet.ru) for this fix
// 990714 - added IE5 persistence - abk pb
// 990715 - went open source, created stripped down example files - abk
// 990720 - jmp() fix getFormNum(formName);->
//     var formNum = getFormNum(formName);
//  if (v) {..} added around newCat array creation for old browsers
// 990721 - getFormNum/relate tweaks, unnec code removed, 
//     ns2.0 mac fix - getFormNum returns -1 in nested tables
//     new jmp bypasses prob - thx to thanks to Michael Guitton
//     saramaca@mail.dotcom.fr
// 990722 - var for scope added, jmp chgd to named form for ns2.02 bug-abk
if(v){a=new Array(22);aln=22;}
function getFormNum (formName) {
  var formNum =-1;
  for (i=0;i<document.forms.length;i++){
    tempForm = document.forms[i];
    if (formName == tempForm) {
      formNum = i;
      correctForm = tempForm;
      break;
    }
  }
  return formNum;
}

function jmp(form, elt)
// The first parameter is a reference to the form.
{
  if (form != null) {
    with (form.elements[elt]) {
      if (0 <= selectedIndex)
        location = options[selectedIndex].value;
    }
  }
}
var catsIndex = -1;
var itemsIndex;
var subItemsIndex;
function newCat(){
  catsIndex++;
  a[catsIndex] = new Array();
  itemsIndex = -1;
}
function O(txt,url) {
  itemsIndex++;
  a[catsIndex][itemsIndex] = new Array();
  a[catsIndex][itemsIndex].text = txt;
  a[catsIndex][itemsIndex].value = url;
  subItemsIndex = 0;
}
function OO(txt,url) {
  a[catsIndex][itemsIndex][subItemsIndex] = new myOptions(txt,url);
  subItemsIndex++;
}
function myOptions(txt,url){
  this.text = txt;
  this.value = url;
}
// fill array
if (v) { // ns 2 fix
newCat();
O("3-D Animation","/3d/");
  OO("Glossary","/3d/glossary/");
  OO("Lesson56","/3d/lesson56/");
  OO("Lesson57","/3d/lesson57/");
  OO("Lesson58","/3d/lesson58/");
  OO("Lesson59","/3d/lesson59/");
O("Design","/dlab/");
  OO("About","/dlab/about.html");
  OO("Books","/dlab/books/");
  OO("Dessert Links","/dlab/dessert.html");
  OO("People Say","/dlab/peoplesay.html");
O("DHTML","/dhtml/");
  OO("Dynomat","/dhtml/dynomat/");
  OO("Diner","/dhtml/diner/");
  OO("Hiermenus","/dhtml/hiermenus/");
  OO("About","/dhtml/about.html");
O("E-Commerce","/ecommerce/mm/");
  OO("About","/ecommerce/mm/about.html");
  OO("Archive","/ecommerce/mm/archives.html");
  OO("Links","/ecommerce/mm/linkidx.html");
O("Graphics","/graphics/");
  OO("Bio","/graphics/bio.html");
  OO("Column1","/graphics/column1/");
  OO("Column2","/graphics/column2/");
  OO("Column3","/graphics/column3/");
O("HTML","/html/");
  OO("About","/html/about/");
  OO("What"s New","/html/new/");
  OO("Tutorials","/html/tutorials/");
  OO("Style Watch","/html/watch/");
O("JavaScript","/js/");
  OO("About","/js/about.html");
  OO("Jx Pharmacy","/js/pharmacy/");
  OO("Column1","/js/column1/");
  OO("Column2","/js/column2/");
  OO("Column3","/js/column3/");
newCat();
O("Authoring","/authoring/");
  OO("Collections","/authoring/collections.html");
  OO("Design","/authoring/design/");
  OO("FAQs","/authoring/faqs.html");
  OO("Graphics","/authoring/graphics/");
  OO("Languages","/authoring/languages/");
  OO("Organizations","/authoring/organizations.html");
  OO("Programming","/programming/");
  OO("Site Management","/authoring/languages/html/site.html");
  OO("Style","/authoring/style/");
  OO("Tutorials","/authoring/tutorials.html");
O("Internet","/internet/");
  OO("Collections","/internet/collections.html");
  OO("Conferences","/internet/conferences.html");
  OO("Discussion","/internet/discussion.html");
  OO("FAQs","/internet/faqs.html");
  OO("Formats","/internet/formats.html");
  OO("Glossaries","/internet/glossaries.html");
  OO("History","/internet/history.html");
  OO("Intranet","/internet/intranet/");
  OO("Jobs","/internet/jobs/");
} // if (v)
function relate(formName,elementNum,j) {
// relate first to second (and third) menus
// ie change first menu, changes second, then change third
//
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
  formNum++; // reference next form, assume it follows in HTML
  with (document.forms[formNum].elements[elementNum]) {
    for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
    for(i=0;i<a[j].length;i++){
      options[i] = new Option(a[j][i].text,a[j][i].value); 
    }
    options[0].selected = true;
  }
// change third menu
relate2(formName,elementNum,0,1);
 }
} else {
jmp(formName,elementNum);
}
}
function relate2(formName,elementNum,j,fromRelate) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
  // find first menu"s selection
  // fromRelate means "coming from relate function?" 
  //   then increment formNum so k refers to first form, 
  //   not the nonexistent one before it (-1)
  if (fromRelate) formNum++; // assumes forms follow each other 
  k = document.forms[formNum-1].elements[elementNum].selectedIndex;
  if(k<0)k=0; // precaution against missing selected in first menu list - abk
  formNum++; // reference next form, assume it follows in HTML
  with (document.forms[formNum].elements[elementNum]) {
    for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
    for(i=0;i<a[k][j].length;i++){
      options[i] = new Option(a[k][j][i].text,a[k][j][i].value); 
    }
    options[0].selected = true;
  }
 }
} else {
jmp(formName,elementNum);
}
}
// BACK BUTTON FIX for ie4+- or
// MEMORY-CACHE-STORING-ONLY-INDEX-AND-NOT-CONTENT
//
// from peter belesis:
// IE4+ remembers the index of each SELECT but NOT the CONTENTS of each
// SELECT, so it gets it wrong.
//
// it has to do with MEMORY CACHE (where form input is stored) and how
// IE stores information about SELECT menus.
//
// IE stores the selectedINDEX ONLY of the SELECT menu, not the
// CONTENTS-AT-THE-TIME-OF-SELECTION
//
// when we return to a page, it displays the default contents of each
// SELECT, grabs the stored index from cache and aligns the default
// contents to that index.
// 
// Netscape, on the other hand, seems to remember both INDEX and CONTENTS
// added ie5 persistence 990714
function IEsetup(){
  if(!document.all) return;
  IE5 = navigator.appVersion.indexOf("5.")!=-1;
  if(!IE5) {
    for (i=0;i<document.forms.length;i++) {
      document.forms[i].reset();
    }
  }
}
window.onload = IEsetup;
//-->
</SCRIPT></HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
<TR VALIGN="TOP"><TD>Choose a subject:<BR><FORM NAME="f1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form,0,this.selectedIndex)"><OPTION VALUE="/experts/">Experts<OPTION VALUE="/index2.html">Contents</SELECT><INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---&gt;</B></TD>
<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="relate2(this.form,0,this.selectedIndex,0)">
<OPTION VALUE="/3d/">3-D Animation
<OPTION VALUE="/dlab/">Design
<OPTION VALUE="/dhtml/">Dynamic HTML
<OPTION VALUE="/ecommerce/mm/">E-Commerce
<OPTION VALUE="/graphics/">Graphics
<OPTION VALUE="/html/">HTML
<OPTION VALUE="/js/">JavaScript</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.webreference.ru">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---&gt;</B></TD>
<TD>Choose a subtopic:<BR><FORM NAME="f3" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m3" ID="m3" CLASS=saveHistory onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/glossary/">Glossary
<OPTION VALUE="/3d/lesson56/">Lesson56
<OPTION VALUE="/3d/lesson57/">Lesson57
<OPTION VALUE="/3d/lesson58/">Lesson58
<OPTION VALUE="/3d/lesson59/">Lesson59
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.wbex.ru">
</FORM></TD>
</TR>
</TABLE></CENTER>
</BODY>
</HTML>

Combobox with cell renderer

<html>
<script language="JavaScript" src="widgets/jsobjects.js"></script>
<script>
  //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("&gt;&gt;");
  listbox_bt1.setEvent("click", transfer1_2);
  listbox_bt1.setWidth("50");
  listbox_bt2 = new JsPushButton("listbox_bt2");
  listbox_bt2.setValue("&lt;&lt;");
  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>

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

Linked comboboxes

<HTML>
<HEAD>
<TITLE>Universal Related Popup Menus / Two, Three, or More! Related Menus - WebReference.ru</TITLE>
<!-- Begin: URPM API -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Universal Related Select Menus - v2.02 19991104
// (Dynamically-sized related menus using JS 1.1"s new Option cmd)
// by Andrew King aking@internet.ru & Michael Guitton saramaca@mail.dotcom.fr
// Copyright (c) 1999 internet.ru Corp. All Rights Reserved.
// Originally published and documented at http://www.webreference.ru
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
//
// Change History
//
// see http://www.webreference.ru/dev/menus/ for prev code 
//
// ---- TOTAL REWRITE ENSUES HERE -----
// NB: The current script is inspired by the above work.
//     Yet the related menus aren"t created the same way and
//     a couple of bugs have been squashed. 
//     I would advise you to refer to the original program
//     to get an idea of what is going on below. ;)
//
//     Michael Guitton
//     saramaca@mail.dotcom.fr
//
// Change History
//
// 27-Oct-1999 :: added support for frames -mg
// 08-Oct-1999 :: comments added, updated docs - abk
// 05-Oct-1999 :: ref() & relate() renamed, respectively, relate() & update()
//                for consistency w/ their respective behaviors - mg
// 04-Oct-1999 :: ref() is all you need (the icing on the cake ;)
//                relate() don"t rely on get() anymore.
//                The current form index is fetched only once
//                See onChange handlers in HTML - mg 
// 30-Sep-1999 :: printItems() mod so won"t stumble on null 1st lvl items - mg
// 29-Sep-1999 :: Added more comments - removed ie5 fix - abk
// 16-Sep-1999 :: relate() changed to be live with end branch
// 14-Sep-1999 :: ref() code rewritten from scratch. Tx Andy!
// 13-Sep-1999 :: New sindex() call checks for unselected parent menu option
// 09-Sep-1999 :: Technique extended to allow 2,3 or more levels with only 
//                one relate() function (a feature requested by Andy ;)
// 20-Jul-1999 :: IE4+ bug fix (Thanks Peter!)
// 23-Apr-1999 :: Use an entirely different method for menu setup
//                Array name isn"t hardcoded in the relate() function, 
//                so several URPMs can be embedded in the same page
//                Fixed a couple of bugs
<!-- Begin: URPM Setup -->
var v = false;
var m = null;
var i = null;
// Set all menu trees to null to avoid any error in JavaScript 1.0 browsers -->
var urpm = self; // frame work-around
// urpm = parent.dummy; // Set the target to the relevant frame
// Comment out the above if you don"t intend to use frames
function get(form)
{
   // loop thru document.forms property and exit w/ current form index
   var num = -1;
   for (var i = 0; i < document.forms.length; i++) {
      if (document.forms[i] == form) {
         num = i; // save form index
         break;
      }
   }
   return num; // returns current form index
}
function sindex(num, offset, elt)
{ 
   // sel finds selected index of num + offset"s form elt"s element
   // in this case elt is always 0, or first select menu in each form
   var sel = document.forms[ num + offset ].elements[elt].selectedIndex;
   if (sel < 0) sel = 0;
   return sel;
}
function jmp(form, elt)
{ // urpm.location added for optional navigation to named frames
   if (form != null) {
      with (form.elements[elt]) {
         if (0 <= selectedIndex)
            urpm.location = options[selectedIndex].value; // jump to selected option"s value
      }
   }
}
function update(num, elt, m)
{ // updates submenus - form(num)"s menu options, and all submenus
   // if refd form exists
   if (num != -1) {
      num++; // reference next form, assume it follows in HTML
      with (document.forms[num].elements[elt]) {
         for (var i = options.length - 1; 0 < i; i--)
            options[i] = null; // null out options in reverse order (bug work-around)
         for (var i = 0; i < m.length; i++) {
            options[i] = new Option(m[i].text, m[i].value); // fill up next menu"s items
         }  
         options[0].selected = true; // default to 1st menu item, windows bug kludge
      }
      if (m[0].length != 0) {
         update(num, elt, m[0]); // update subsequent form if any grandchild menu exists
      }
   }
}
function relate(form, elt, tree, depth)
{ // relate submenus based on sel of form - calls update to redef submenus
   if (v) {
      var num = get(form); // fetch the current form index
      var a = tree;        // set a to be the tree array
      while (a != null && --depth != -1)
         // traverse menu tree until we reach the corresponding option record
         a = a[sindex(num, -depth, elt)];
      // at depth 3, should end up w/ something like a[i][j][k]
      // where each index holds the value of s(elected )index in related form select elts
      if (a != null && a.length) {
         // if a array exists and it has elements,
         // feed update() w/ this record reference
         update(num, elt, a); 
         return;
      }
   }
   // if a hasn"t any array elements or new Option unsupported then end up here ;)
   jmp(form, elt); // make like a live popup
}
// Internet Explorer 4+ bug fix:
// IE4+ remembers the index of each SELECT but NOT the CONTENTS of each SELECT, 
// so it gets it wrong.
//
// Thanks to Peter Belesis (pbel@internet.ru) for pointing this out.
function resetIE() {
   for (var i = 0; i < document.forms.length; i++) {
      document.forms[i].reset();
   }
}
if (document.all)
   window.onload = resetIE;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1" TYPE="text/javascript">
<!-- This script can also be referenced externally...
// Check if Option constructor is supported
if ((typeof(Option) + "") != "undefined") v = true;
// This constructor works equally well for 2D,3D and over
function O(text, value, submenu)
{
   this.text = text;
   this.value = value;
   this.length = 0;
   if (submenu != null) {
      // submenu is an array of options...
      for (var i = 0; i < submenu.length; ) {
         this[i] = submenu[i];
         this.length = ++i;
      }
   }
}
//-->
</SCRIPT>
<!-- End: URPM API -->
<SCRIPT LANGUAGE="JavaScript1.1" TYPE="text/javascript">
if (v) {
  m = new Array(
    new Array(
      new O("3-D Animation","/3d/", new Array(
        new O("Lesson56","/3d/lesson56/", new Array(
          new O("56.1","/3d/lesson56/", null),
          new O("56.2","/3d/lesson56/part2.html",null),
          new O("56.3","/3d/lesson56/part3.html",null))
        ),
        new O("Lesson57","/3d/lesson57/", new Array(
          new O("57.1","/3d/lesson57/", null),
          new O("57.2","/3d/lesson57/part2.html",null),
          new O("57.3","/3d/lesson57/part3.html",null))
        ),
        new O("Lesson58","/3d/lesson58/", new Array(
          new O("58.1","/3d/lesson58/", null),
          new O("58.2","/3d/lesson58/part2.html",null),
          new O("58.3","/3d/lesson58/part3.html",null))
        ),
        new O("Lesson59","/3d/lesson59/", new Array(
          new O("59.1","/3d/lesson59/", null),
          new O("59.2","/3d/lesson59/part2.html",null),
          new O("59.3","/3d/lesson59/part3.html",null))
        ))
      ),
      new O("Design","/dlab/", new Array(
        new O("About","/dlab/about.html", new Array(
          new O("About.1","/3d/lesson56/", null),
          new O("About.2","/3d/lesson56/part2.html",null),
          new O("About.3","/3d/lesson56/part3.html",null))
        ),
        new O("Books","/dlab/books/", new Array(
          new O("Books.1","/3d/lesson56/", null),
          new O("Books.2","/3d/lesson56/part2.html",null),
          new O("Books.3","/3d/lesson56/part3.html",null))
        ),
        new O("Dessert Links","/dlab/dessert.html", new Array(
          new O("Dessert Links.1","/3d/lesson56/", null),
          new O("Dessert Links.2","/3d/lesson56/part2.html",null),
          new O("Dessert Links.3","/3d/lesson56/part3.html",null))
        ),
        new O("People Say","/dlab/peoplesay.html", new Array(
          new O("People Say.1","/3d/lesson56/", null),
          new O("People Say.2","/3d/lesson56/part2.html",null),
          new O("People Say.3","/3d/lesson56/part3.html",null))
        ))
      ),
      new O("DHTML","/dhtml/", new Array(
        new O("Dynomat","/dhtml/dynomat/", new Array(
          new O("Dynomat.1","/3d/lesson56/", null),
          new O("Dynomat.2","/3d/lesson56/part2.html",null),
          new O("Dynomat.3","/3d/lesson56/part3.html",null))
        ),
        new O("Diner","/dhtml/diner/", null /*new Array(
          new O("Diner.1","/3d/lesson56/", null),
          new O("Diner.2","/3d/lesson56/part2.html",null),
          new O("Diner.3","/3d/lesson56/part3.html",null))*/
        ),
        new O("Hiermenus","/dhtml/hiermenus/", new Array(
          new O("Hiermenus.1","/3d/lesson56/", null),
          new O("Hiermenus.2","/3d/lesson56/part2.html",null),
          new O("Hiermenus.3","/3d/lesson56/part3.html",null))
        ),
        new O("About","/dhtml/about.html", new Array(
          new O("About.1","/3d/lesson56/", null),
          new O("About.2","/3d/lesson56/part2.html",null),
          new O("About.3","/3d/lesson56/part3.html",null))
        ))
      ),
// You can null out the above subarray as shown below:
//
//      new O("DHTML","/dhtml/", null /*new Array(
//        new O("Dynomat","/dhtml/dynomat/", null),
//        new O("Diner","/dhtml/diner/", null),
//        new O("Hiermenus","/dhtml/hiermenus/", null),
//        new O("About","/dhtml/about.html", null))*/
//      ),
      new O("Graphics","/graphics/", new Array(
        new O("Bio","/graphics/bio.html", new Array(
          new O("Bio.1","/3d/lesson56/", null),
          new O("Bio.2","/3d/lesson56/part2.html",null),
          new O("Bio.3","/3d/lesson56/part3.html",null))
        ),
        new O("Column1","/graphics/column1/", new Array(
          new O("Column1.1","/3d/lesson56/", null),
          new O("Column1.2","/3d/lesson56/part2.html",null),
          new O("Column1.3","/3d/lesson56/part3.html",null))
        ),
        new O("Column2","/graphics/column2/", new Array(
          new O("Column2.1","/3d/lesson56/", null),
          new O("Column2.2","/3d/lesson56/part2.html",null),
          new O("Column2.3","/3d/lesson56/part3.html",null))
        ),
        new O("Column3","/graphics/column3/", new Array(
          new O("Column3.1","/3d/lesson56/", null),
          new O("Column3.2","/3d/lesson56/part2.html",null),
          new O("Column3.3","/3d/lesson56/part3.html",null))
        ))
      ),
      new O("HTML","/html/", new Array(
        new O("About","/html/about/", new Array(
          new O("About.1","/3d/lesson56/", null),
          new O("About.2","/3d/lesson56/part2.html",null),
          new O("About.3","/3d/lesson56/part3.html",null))
        ),
        new O("What"s New","/html/new/", new Array(
          new O("What"s New.1","/3d/lesson56/", null),
          new O("What"s New.2","/3d/lesson56/part2.html",null),
          new O("What"s New.3","/3d/lesson56/part3.html",null))
        ),
        new O("Tutorials","/html/tutorials/", new Array(
          new O("Tutorials.1","/3d/lesson56/", null),
          new O("Tutorials.2","/3d/lesson56/part2.html",null),
          new O("Tutorials.3","/3d/lesson56/part3.html",null))
        ),
        new O("Style Watch","/html/watch/", new Array(
          new O("Style Watch.1","/3d/lesson56/", null),
          new O("Style Watch.2","/3d/lesson56/part2.html",null),
          new O("Style Watch.3","/3d/lesson56/part3.html",null))
        ))
      ),
      new O("JavaScript","/js/", new Array(
        new O("About","/js/about.html", new Array(
          new O("About.1","/3d/lesson56/", null),
          new O("About.2","/3d/lesson56/part2.html",null),
          new O("About.3","/3d/lesson56/part3.html",null))
        ),
        new O("Jx Pharmacy","/js/pharmacy/", new Array(
          new O("Jx Pharmacy.1","/3d/lesson56/", null),
          new O("Jx Pharmacy.2","/3d/lesson56/part2.html",null),
          new O("Jx Pharmacy.3","/3d/lesson56/part3.html",null))
        ),
        new O("Column1","/js/column1/", new Array(
          new O("Column1.1","/3d/lesson56/", null),
          new O("Column1.2","/3d/lesson56/part2.html",null),
          new O("Column1.3","/3d/lesson56/part3.html",null))
        ),
        new O("Column2","/js/column2/", new Array(
          new O("Column2.1","/3d/lesson56/", null),
          new O("Column2.2","/3d/lesson56/part2.html",null),
          new O("Column2.3","/3d/lesson56/part3.html",null))
        ),
        new O("Column3","/js/column3/", new Array(
          new O("Column3.1","/3d/lesson56/", null),
          new O("Column3.2","/3d/lesson56/part2.html",null),
          new O("Column3.3","/3d/lesson56/part3.html",null))
        ))
      )
    ),

    new Array(
      new O("Authoring","/authoring/", new Array(
        new O("Collections","/authoring/collections.html", new Array(
          new O("Collections.1","/3d/lesson56/", null),
          new O("Collections.2","/3d/lesson56/part2.html",null),
          new O("Collections.3","/3d/lesson56/part3.html",null))
        ),
        new O("Design","/authoring/design/", new Array(
          new O("Design.1","/3d/lesson56/", null),
          new O("Design.2","/3d/lesson56/part2.html",null),
          new O("Design.3","/3d/lesson56/part3.html",null))
        ))
      ),
      new O("Internet","/internet/", new Array(
        new O("Collections","/internet/collections.html", new Array(
          new O("Collections.1","/3d/lesson56/", null),
          new O("Collections.2","/3d/lesson56/part2.html",null),
          new O("Collections.3","/3d/lesson56/part3.html",null))
        ),
        new O("Conferences","/internet/conferences.html", new Array(
          new O("Conferences.1","/3d/lesson56/", null),
          new O("Conferences.2","/3d/lesson56/part2.html",null),
          new O("Conferences.3","/3d/lesson56/part3.html",null))
        ),
        new O("Discussion","/internet/discussion.html", new Array(
          new O("Discussion.1","/3d/lesson56/", null),
          new O("Discussion.2","/3d/lesson56/part2.html",null),
          new O("Discussion.3","/3d/lesson56/part3.html",null))
        ))
      )
    )  
  );
  i = new Array(
    new Array( // internet.ru news channels
      new O("InternetNews.ru","http://www.InternetNews.ru",null),
      new O("InternetNews Radio","http://stream.internet.ru/",null),
      new O("atNewYork","http://www.atnewyork.ru/",null),
      new O("NewsLinx","http://www.newslinx.ru",null)
      ),
    new Array( // internet.ru web dev channels
      new O("WebDeveloper.ru","http://www.WebDeveloper.ru",null),
      new O("WDVL.ru","http://WDVL.ru/",null),
      new O("WebReference.ru","http://www.WebReference.ru/",null)
      )
    );
}

</SCRIPT>
<!-- 
// Initialize above menu trees if Option constructor is supported -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" ALINK="#666666" LINK="#0000CC" VLINK="#CC0099">
<H1 ALIGN=CENTER>Two, Three or More (!) Related Menus</H1>
<H2 ALIGN=CENTER><EM>Universal Related Popup Menus</EM></H2>
<P><A NAME="bi">&#160;</A>
<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
  <TR VALIGN=BOTTOM>
<TD>Pick an Internet.ru Channel:<BR><FORM NAME="fi1" METHOD="POST"
ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="i1" ID="i1" CLASS=saveHistory 
onChange="relate(this.form, 0, i, 1)">
<OPTION VALUE="news.html">Internet News
<OPTION VALUE="webdev.html">Web Developer
<OPTION VALUE="marketing.html">Internet Marketing
</SELECT><INPUT TYPE=SUBMIT VALUE="Go"
onClick="jmp(this.form,0);">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>-&gt;</B></TD>
<TD>Pick a Web Site:<BR><FORM NAME="fi2" METHOD="POST"
ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="i2" ID="i2" CLASS=saveHistory onChange="jmp(this.form,0);">
<OPTION VALUE="">InternetNews.ru
<OPTION VALUE="">InternetNews Radio
<OPTION VALUE="">AtNewYork
<OPTION VALUE="">NewsLinx
</SELECT><INPUT TYPE=SUBMIT VALUE="Go"
onClick="jmp(this.form,0);">
</FORM></TD>

  </TR>
  </TABLE>
</CENTER>
<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
<TR VALIGN="TOP"><TD>Choose a subject:<BR><FORM NAME="f1" METHOD="POST"
ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m1" ID="m1" CLASS=saveHistory 
onChange="relate(this.form, 0, m, 1)">
<OPTION VALUE="/experts/">Experts<OPTION
VALUE="/index2.html">Contents</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.webreference.ru">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>-&gt;</B></TD>
<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST"
ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m2" ID="m2" CLASS=saveHistory 
onChange="relate(this.form, 0, m, 2)">
<!--      ^^^^^^^^^^^^^^^^^^^^^^^^^^
This is where it gets tricky : we have to know the current selection of the
previous menu. I assume the forms follow each other
Michael Guitton
09-Sep-1999
-->
<OPTION VALUE="/3d/">3-D Animation
<OPTION VALUE="/dlab/">Design
<OPTION VALUE="/dhtml/">Dynamic HTML
<OPTION VALUE="/graphics/">Graphics
<OPTION VALUE="/html/">HTML
<OPTION VALUE="/js/">JavaScript</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.wbex.ru">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>-&gt;</B></TD>
<TD>Choose a subtopic:<BR><FORM NAME="f3" METHOD="POST"
ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m3" ID="m3" CLASS=saveHistory 
onChange="relate(this.form, 0, m, 3)">
<OPTION VALUE="/3d/lesson56/">Lesson56
<OPTION VALUE="/3d/lesson57/">Lesson57
<OPTION VALUE="/3d/lesson58/">Lesson58
<OPTION VALUE="/3d/lesson59/">Lesson59
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.webreference.ru">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>-&gt;</B></TD>

<TD>Choose a sub-subtopic:<BR><FORM NAME="f4" METHOD="POST"
ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m4" ID="m4" CLASS=saveHistory 
onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/lesson56/">PAGE1
<OPTION VALUE="/3d/lesson56/part2.html">PAGE2
<OPTION VALUE="/3d/lesson56/part3.html">PAGE3
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="">
</FORM></TD>
</TR>
</TABLE>
</CENTER>
<PRE><SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript1.1">
<!--
var count;
function printItems(m, shift, level)
{
   if (m != null) {
      var label = "Item " + ((m.text) ? m.text : count);
      document.writeln(shift + "// Begin " + label);
      for (var i = 0; i < m.length; i++) {
         document.writeln(shift + level + ": " + m[i].text, " => ", m[i].value);
         if (m[i].length) {
            printItems(m[i], shift + " ", level + 1);
         }
      }
      document.writeln(shift + "// End " + label);
   }
   else
      document.writeln(shift + "// Null item " + count);
}
for (count = 0; count < m.length; count++) {
  printItems(m[count], "", 0);
}
document.writeln("");
//-->
</SCRIPT></PRE>
</BODY>
</HTML>

JavaScript DHTML/GUI Components/ComboBox

Содержание

2D Related Comboboxes

3D related comboboxes

Combobox with cell renderer

Linked comboboxes

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты