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