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

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Tab 
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
w__w_w_.j___a_v__a__2__s___._c__o__m_ | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.