Menu Component

Gladiator Components >> Menu Component >> API Reference

Menu Component

The menu component is a Gladiator class for creating fixed and floating main menus and sub-menus.

CSS Dependencies

Javascript Dependencies

To use the menu in right-to-left environments, such as in an Arabic or Hebrew environment, be sure to also include gladiatorLocale.js.

Sample Usage

//
// Create Oranges sub-menu:
//
// => x-y location is irrelevant for submenus:
// => However width (150) is relevant:
//
orangesSubMenu = new gMenu("Oranges","color",300,50,150,false,true);
orangesSubMenu.addItem("Cara Cara" ,"cara" ,dummyAction);
orangesSubMenu.addItem("Jincheng" ,"jincheng",dummyAction);
orangesSubMenu.addItem("Navel" ,"navel" ,dummyAction);
orangesSubMenu.addItem("Parson Brown","parson" ,dummyAction);
orangesSubMenu.addItem("Pera" ,"pera" ,dummyAction);
orangesSubMenu.addItem("Valencia" ,"valencia",dummyAction);
//
// Test disabling items by ID -- Use "enableItem()" to re-enable:
//
orangesSubMenu.disableItem("parson");
orangesSubMenu.disableItem("jincheng");
//
// Create fruits sub-menu:
//
// => To have a submenu popup, pass the instance of the submenu
// for the "action" parameter. For example, here the "action" of
// the "oranges" item is the orangesSubMenu:
// => Take a look at gladiatorMenu.css to see how the custom icon CSS classes
// are written:
//
var fruitsSubMenu = new gMenu("Fruits","fruits",300,50,150,false,true);
fruitsSubMenu.addItem("Apples" ,"apples" ,dummyAction ,false,false,true,"applesIcon" );
fruitsSubMenu.addItem("Grapes" ,"grapes" ,dummyAction ,false,false,true,"grapesIcon" );
fruitsSubMenu.addItem("Grapefruits","grapefruits" ,dummyAction ,false,false,true,"grapefruitsIcon");
fruitsSubMenu.addItem("Oranges" ,"oranges" ,orangesSubMenu,true ,false,true,"orangesIcon" );
fruitsSubMenu.addItem("Mangoes" ,"mangoes" ,dummyAction ,false,false,true,"mangoesIcon" );
//
// Don't forget to tell the submenus about their parents:
//
orangesSubMenu.setParentMenu(fruitsSubMenu);
//
// Now the main menu:
//
var mainMenu = new gMenu("Gladiator Menu","main",750,60,150,true,false);
mainMenu.addItem("New Window" ,"new" ,dummyAction,false,false,true);
mainMenu.addItem("Open Folder" ,"open" ,dummyAction,false,false,true,"gMenuOpenIcon");
mainMenu.addItem("Send email" ,"email",dummyAction,false,true ,true);

//
// Testing right to left:
// => LC.setLocale("ar") or LC.setLocale("he") could also be used, but here
// we just set the global LC locale environment directly to rtl:
// => NOTE BENE: RTL requires "gladiatorLocale.js"
//
LC.setDirection("rtl");
calligraphyMenu = new gMenu("الخط","calligraphy",300,50,150,false,true);
calligraphyMenu.addItem("الكوفي","kufi",dummyAction,false,false,true,"kufiIcon");
calligraphyMenu.addItem("النسخ","naskh",dummyAction,false,false,true,"naskhIcon");
calligraphyMenu.addItem("الثلث","thuluth",dummyAction,false,false,true,"thuluthIcon");
mainMenu.addItem("الخط","calligraphy",calligraphyMenu,true,false,true);
calligraphyMenu.setParentMenu(mainMenu);
//
// As we are only testing RTL features, set LC back to LTR
// for the remainder of the menu:
//
LC.setDirection("ltr");

mainMenu.addItem("Fruits" ,"fruits" ,fruitsSubMenu,true,false,true);
fruitsSubMenu.setParentMenu(mainMenu);