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

Custom Menubars-Completion

Let us put all three sections together now, and complete the loadCustomMenus() function.

Complete Function Code

function loadCustomMenus()
    //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);

    //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')"));
    
    //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. 18 Completed Code

Finished Product

Below are screen shots of the completed custom menubars.

Floorplan Menu Fig. 19 Custom Floorplan menubar
AHU-1 Menu Fig. 20 Custom AHU-1 menubar
AHU-2 Menu Fig. 21 Custom AHU-2 menubar
Plant Menu Fig. 22 Custom Plant menubar

Finals Words

Custom menubars look professional, and they allow you to provide universal and consistent navigation to your end user, in a format they are already familiar with.

In the long run, they are much easier to work with than maintaining buttons and labels on your webviews.

Utilize a copy and paste technique to speed JavaScript coding, then modify the parts that need changing. This saves time over coding everything from scratch.

Previous