Toolbar with menu : ToolBar « GUI Components « JavaScript DHTML






Toolbar with menu

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








jsobjects.zip( 366 k)

Related examples in the same category

1.Dragable and sortable toolbar
2.The Complete Source of the Toolbar
close