Home > Applications > JavaScript > Custom Menubars > Determine Need > Starting Code > Code Breakdown

Custom Menubars-Code Breakdown

Let's breakdown the three sections of the loadCustomMenus() function. This will help us understand how to modify the code.

The Three Sections

Declaration

First, we need to declare the menubars.

Each custom menubar needs to be created as a JavaScript variable. Our starting code had this code in the declaration section.

//FIRST, declare each custom menubar as a variable
//first number is header width, second number is item width
var hdr1Menu = new NavBarMenu(80, 125);
var hdr2Menu = new NavBarMenu(90, 155);
Fig. 12 Beginning declaration section

For our example, we decided we would have four custom menubars; Floorplan, AHU-1, AHU-2 and Plant. The following example shows the declaration section edited to fit the four headers.

//FIRST, declare each custom menubar as a variable
//first number is header width, second number is item width
var floorMenu = new NavBarMenu(90, 125);
var ahu1Menu = new NavBarMenu(70, 125);
var ahu2Menu = new NavBarMenu(70, 125);
var plantMenu = new NavBarMenu(80, 125);
Fig. 13 Edited declaration section

Population

Second, we need to add item-level content to the menubars.

Each newly created JavaScript variable now needs to be used to add header and item content to each menubar. The first entry defines the header content. Each subsequent entry defines drop-down item content. The NavBarMenuItem() function has two arguments.

//SECOND, create content for menubar, keep each variable separated
//first instance creates header, subsequent instances create drop-down items
//second argument of items is for the onClick event
//edit the Goto() function as needed
hdr1Menu.addItem(new NavBarMenuItem("Menu 1", ""));
hdr1Menu.addItem(new NavBarMenuItem("Item 1", "javascript:Goto('main')"));
hdr1Menu.addItem(new NavBarMenuItem("Item 2", "javascript:Goto('main')"));
hdr1Menu.addItem(new NavBarMenuItem("Item 3", "javascript:Goto('main')"));

hdr2Menu.addItem(new NavBarMenuItem("Menu 2", ""));
hdr2Menu.addItem(new NavBarMenuItem("Item 1", "javascript:Goto('main')"));
hdr2Menu.addItem(new NavBarMenuItem("Item 2", "javascript:Goto('main')"));
Fig. 14 Beginning population section

In our example, we defined the items for our custom menubars. Here they are after editing.

//SECOND, create content for menubar, keep each variable separated
//first instance creates header, subsequent instances create drop-down items
//second argument of items is for the onClick event
//edit the Goto() function as needed
floorMenu.addItem(new NavBarMenuItem("Floorplan", ""));
floorMenu.addItem(new NavBarMenuItem("1st Floor", "javascript:Goto('floor1')"));
floorMenu.addItem(new NavBarMenuItem("2nd Floor", "javascript:Goto('floor2')"));

ahu1Menu.addItem(new NavBarMenuItem("AHU-1", ""));
ahu1Menu.addItem(new NavBarMenuItem("Detail", "javascript:Goto('ahu1')"));
ahu1Menu.addItem(new NavBarMenuItem("Schedule", "javascript:Goto('sch1')"));
ahu1Menu.addItem(new NavBarMenuItem("", ""));
ahu1Menu.addItem(new NavBarMenuItem("VAV-101", "javascript:Goto('vav')"));
ahu1Menu.addItem(new NavBarMenuItem("VAV-102", "javascript:Goto('vav;VAV_101<102>')"));
ahu1Menu.addItem(new NavBarMenuItem("VAV-103", "javascript:Goto('vav;VAV_101<103>')"));
ahu1Menu.addItem(new NavBarMenuItem("VAV-104", "javascript:Goto('vav;VAV_101<104>')"));
ahu1Menu.addItem(new NavBarMenuItem("VAV-105", "javascript:Goto('vav;VAV_101<105>')"));
ahu1Menu.addItem(new NavBarMenuItem("VAV-106", "javascript:Goto('vav;VAV_101<106>')"));


ahu2Menu.addItem(new NavBarMenuItem("AHU-2", ""));
ahu2Menu.addItem(new NavBarMenuItem("Detail", "javascript:Goto('ahu2')"));
ahu2Menu.addItem(new NavBarMenuItem("Schedule", "javascript:Goto('sch2')"));
ahu2Menu.addItem(new NavBarMenuItem("", ""));
ahu2Menu.addItem(new NavBarMenuItem("VAV-201", "javascript:Goto('vav;VAV_101<201>')"));
ahu2Menu.addItem(new NavBarMenuItem("VAV-202", "javascript:Goto('vav;VAV_101<202>')"));
ahu2Menu.addItem(new NavBarMenuItem("VAV-203", "javascript:Goto('vav;VAV_101<203>')"));
ahu2Menu.addItem(new NavBarMenuItem("VAV-204", "javascript:Goto('vav;VAV_101<204>')"));
ahu2Menu.addItem(new NavBarMenuItem("VAV-205", "javascript:Goto('vav;VAV_101<205>')"));

plantMenu.addItem(new NavBarMenuItem("Plant", ""));
plantMenu.addItem(new NavBarMenuItem("Boiler", "javascript:Goto('boiler')"));
plantMenu.addItem(new NavBarMenuItem("Chiller", "javascript:Goto('chiller')"));
Fig. 15 Edited population section

Representation

Third, we need to make sure the menubars are rendered.

Each menubar now needs to be added to the default menubar. The order they are listed, top to bottom, will decide the order the appear in, from left to right. They will be added on the default menubar to the right of the last default header entry.

//THIRD, add custom menubars to the default menubar
//the order you list them is the order they will appear, left to right
menuBar.addMenu(hdr1Menu);
menuBar.addMenu(hdr2Menu);
Fig. 16 Beginning representation section

After editing, the representation section now looks like this.

//THIRD, add custom menubars to the default menubar
//the order you list them is the order they will appear, from left to right
menuBar.addMenu(floorMenu);
menuBar.addMenu(ahu1Menu);
menuBar.addMenu(ahu2Menu);
menuBar.addMenu(plantMenu);
Fig. 17 Edited representation section
Next Previous