Tab with control inside : Tab « GUI Components « JavaScript DHTML






Tab with control inside

 <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.Tab Manager 1
2.Tab Manager 2
3.Tab control for a game
4.Tabs in JavaScript
5.Slide tab
6.Tab control
7.Four Tab with different style
8.XP Tab in JavaScript
9.Two tab in one page
10.HTML style tab
11.Calendar in tab
12.Tab in javascript
13.Tab from gwidgets_0.8.0
14.One tab: Easy Tabs 1.2
15.Two tab: Easy Tabs 1.2
16.three tabs: Easy Tabs 1.2
17.Tabber Example
18.Nested tab and tab changed event
19.Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected
close