JavaScript DHTML/GUI Components/ComboBox
Содержание
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>
<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>