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(">>");
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>
jsobjects.zip( 366 k)Related examples in the same category