Not too fancy menu with toolbar : Menu « GUI Components « JavaScript DHTML






Not too fancy menu with toolbar

<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.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Custom Contextual Menu(content sensitive)
11.Drop-Down Menus
12.Menu with sound
13.Menu based on Javascript
14.popup menu (content sensitive menu)
15.Complete Source Code for the Menu
16.Slide out menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu