JavaScript DHTML/GUI Components/ComboBox

Материал из Web эксперт
Перейти к: навигация, поиск

2D Related Comboboxes

   <source lang="html4strict">

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

</SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1">

</SCRIPT> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT></HEAD> <BODY BGCOLOR="#ffffff">

Choose a subject:
<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>
---> Choose a topic:
<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>

</BODY> </HTML>


      </source>
   
  


3D related comboboxes

   <source lang="html4strict">

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

</SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1">

</SCRIPT> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT></HEAD> <BODY BGCOLOR="#ffffff">

Choose a subject:
<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>
---> Choose a topic:
<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>
---> Choose a subtopic:
<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>

</BODY> </HTML>

      </source>
   
  


Combobox with cell renderer

   <source lang="html4strict">

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


Linked comboboxes

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Universal Related Popup Menus / Two, Three, or More! Related Menus - WebReference.ru</TITLE>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

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

</SCRIPT>

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

</SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" ALINK="#666666" LINK="#0000CC" VLINK="#CC0099">

Two, Three or More (!) Related Menus

Universal Related Popup Menus

<A NAME="bi"> </A>

Pick an Internet.ru Channel:
<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>
-> Pick a Web Site:
<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>
Choose a subject:
<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>
-> Choose a topic:
<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)">

<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>
-> Choose a subtopic:
<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>
-> Choose a sub-subtopic:
<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>
<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>

</BODY> </HTML>


</source>