If you have a large menu, you might not want to have the whole menu defined in a single file. Joust makes it easy for you to define only part of your menu in index.htm and new menu entries from a different file at a later time. This allows you to:
There are two things you need to do prepare the index.htm
You need to choose a way to make the page that contains the sub menu definitions load when you want it to. The easiest way to do this is to set the page with the sub menu definitions as the URL of your existing menu entry and turn on the linkOnExpand property.
level1ID = theMenu.addEntry(level1ID, "Folder", "Dynamic Menus", "/dynamic.htm", "The child entries for this don't exist until you open it."); theMenu.entry[level1ID].FirstChild = -2;
The effect of this is that /dynamic.htm will load into the text frame when the user clicks anywhere on the "Dynamic Menu" entry (i.e. the entry itself or the expand/collapse image).
There are other techniques you can use as well; you could have the extra menu definitions in a normal page that the user must load first. You could define an onToggle function to load the page in another window or another frame. Whatever you do, the point is that to add new entries to the menu you have to find a way to get the page that has the new entries loaded into the user's computer.
Now, the page that you have specified above needs to have some code in it to update the menu. Here is an example of an updateMenu function
function updateMenu() { if ((parent.theMenu) && (parent.theMenu.amBusy == false)) { //Check that Joust is present //First, find the ID of the entry that points to this page. This is where //we are going to add the new entries. var level1ID = parent.theMenu.findEntry(self.location.pathname, 'URL'); var level2ID = -1; if (level1ID != -1) { if (parent.theMenu.entry[level1ID].FirstChild < 0) { //Check they haven't been added already. level2ID = parent.theMenu.addChild(level1ID, "Document", "Dummy", "dummy.htm", ""); level2ID = parent.theMenu.addChild(level1ID, "Document", "Dummy", "dummy.htm", ""); level2ID = parent.theMenu.addChild(level1ID, "Document", "Dummy", "dummy.htm", ""); parent.theMenu.reload(); //Now, reload (and redraw) the menu. } } } else { setTimeout("updateMenu();", 100); } }
The first 'if' statement checks that the menu exists and is not currently doing something (like being drawn), otherwise a timeout is set to try again in a little while.
The next line works out where the new entries are going to be added. This is using the findEntry function to find the ID of the entry with a URL that matches the current page. location.pathname returns a full path so, for this to work, you must have used the full path when you originally defined the menu entry. There are other ways of finding the ID of the entry to use including:
The second "if" statement checks to make sure that the findEntry actually found something. Finally, the third "if" checks to make sure that the new entries haven't already been added.
Here is a slight variation on the above updateMenu function.
function updateMenu() { if ((parent.theMenu) && (parent.theMenu.amBusy == false)) { //Check that Joust is present //First, find the ID of the entry that points to this page. This is where //we are going to add the new entries. var level2ID = parent.theMenu.findEntry('Dynamic Menus', 'text'); if (level2ID != -1) { if (parent.theMenu.entry[level2ID].nextItem < 0) { //Check they haven't been added already. level2ID = parent.theMenu.addEntry(level2ID, "Document", "Dummy", "dummy.htm", ""); level2ID = parent.theMenu.addEntry(level2ID, "Document", "Dummy", "dummy.htm", ""); level2ID = parent.theMenu.addEntry(level2ID, "Document", "Dummy", "dummy.htm", ""); parent.theMenu.reload(); //Now, reload (and redraw) the menu. } } } else { setTimeout("updateMenu();", 100); } }
This function uses the 'title' form of findEntry to find the entry for this page ('Dynamic Menus') and adds three new entries after it. Click here to try it.
An important point to note about this function is that is adding the three new entries after the "Dynamic Menus" entry, not below it. The reason that this is important is the line that to see if the entries have been added already:
if (parent.theMenu.entry[level2ID].nextItem < 0) { //Check they haven't been added already.
This line uses the nextItem property of the menuItem object to see if there is already an entry after it. You will need to modify this to suit the your circumstances. For example, you may be inserting new entries between two items and will need to look at a property of the next item to to decide what to do.
More commonly, you will be adding new entries below the found entry, in which case you will need to test if the entry has any children, like this:
function updateMenu() { if ((parent.theMenu) && (parent.theMenu.amBusy == false)) { //Check that Joust is present //First, find the ID of the entry that points to this page. This is where //we are going to add the new entries. var level2ID = parent.theMenu.findEntry('Dynamic Menus', 'text'); if (level2ID != -1) { if (parent.theMenu.entry[level2ID].FirstChild < 0) { //Check they haven't been added already. var level3ID = parent.theMenu.addChild(level2ID, "Document", "Dummy", "dummy.htm", ""); level3ID = parent.theMenu.addEntry(level3ID, "Document", "Dummy", "dummy.htm", ""); level3ID = parent.theMenu.addEntry(level3ID, "Document", "Dummy", "dummy.htm", ""); parent.theMenu.reload(); //Now, reload (and redraw) the menu. } } } else { setTimeout("updateMenu();", 100); } }
Click here to try it.
Finally, you need to run your updateMenu function. This is simply a matter of putting a call to updateMenu in your SCRIPT section, outside of any function definitions. For example:
function updateMenu() { // code to update the menu here } // Now call updateMenu updateMenu();