JavaScript – behavior layer

Call parameters

The TreeMenu constructor takes two arguments, menuId and allowWhitspace.
Note: both arguments are optional.

menuId

id of the <div> element surrounding the menu. Defaults to "menu".

allowWhitespace

allow for whitespace in the menu HTML code when true. Defaults to true. The script runs slightly faster when whitespace is not allowed (but in this case you have to make sure there really is no whitespace in the HTML source).

Configuration settings

Sections

The settings are divided into three sections:

• config
• hooks
• texts

To change settings, use:

• Change settings of all instances:
  • Nornix.TreeMenu.prototype.config
  • Nornix.TreeMenu.prototype.hooks
  • Nornix.TreeMenu.prototype.texts
• Change settings of a single instance:
  • myMenu.config
  • myMenu.hooks
  • myMenu.texts

Sample code:

var treemenu = new Nornix.TreeMenu();
treemenu.config.dynamicClasses = false;
treemenu.config.menuLinkElement = "menulink";
Nornix.TreeMenu.prototype.texts.openFolderTitle  = "öppna mapp";

config properties

dynamicClasses

set to true if the server does not insert the needed classes

Note: the needed classes are: root, folder, document, last and open.

openCloseAll

set to true to enable clickable icons for opening/closing all folders.

markCurrentItem

This is a setting to add an empty span element in the beginning of the anchor element representing the current page. Set to false to avoid this action.

focusCurrentItem

Activating this setting makes the menu item of the current page recieve focus on page load.

contentElement

set this to the id of the page content block. Keyboard users will benefit from this. Defaults to content. Set to false to disable this function. When the users presses the ESC key, focus is moved from the menu to the content.

menuLinkElement

Setting for link to the menu. Set to id of the link to the menu, to make it really focus the root link of the menu, and prevent scrolling. Defaults to menuLink. Set to false to disable this function. In the example pages, the word "Menu" is linked to the menu.

preloadImages

array of image file names. Preloding the menu images can make them appear faster on the screen. Set to false to prohibit preloading.

Note: the order of the images is important! Make sure to update the image filenames if you use other image files.

imagePath

path to the menu images. Make sure it can be added in front of the image file names to give the right location of the files.

hooks properties

dynamicDocumentLinks

function that will be called on document node clicks and keyboard Enter events.

The function is provided the activated link as an argument. The function should return false to prevent further event handlers or true to let them run.

dynamicFolderLinks

function that will be called on folder node clicks and keyboard Enter events.

The function is provided the activated link as an argument. The function should return false to prevent further event handlers or true to let them run.

Sample code:

treemenu.hooks.dynamicDocumentLinks = function (a)
{
	$("#ajax-load").hide().load(a.href, function (){
		$("#ajax-load").slideDown(400);
	});
	return false;
};

This code uses the jQuery library to insert the contents of the linked documents into the page using Ajax-style loading. Another possible use for this feature would be in an application context.

texts properties

Set the properties in this section to change the language of the tree menu. Please refer to the source code. The meaning of the different texts should be pretty obvious. For an example, see Internationalization below.

Invoking the script

// create instance of TreeMenu
var treemenu = new Nornix.TreeMenu();
// set configuration settings as needed
treemenu.config.dynamicClasses = false;
// start the script
treemenu.start();

There is no need to wait for the page to load before invoking the tree menu, it will by itself keep track on when the menu is available in the DOM. While waiting for the (X)HTML to get parsed by the browser, it will preload the images.

Internationalization

To modify the texts used as titles for the toggle symbols, you can put code like this in a separate script or in a <script> element:

Nornix.TreeMenu.prototype.texts.closeTreeTitle   = "stäng alla mappar";
Nornix.TreeMenu.prototype.texts.openTreeTitle    = "öppna alla mappar";
Nornix.TreeMenu.prototype.texts.closeFolderTitle = "stäng mapp";
Nornix.TreeMenu.prototype.texts.openFolderTitle  = "öppna mapp";

or like this:

Nornix.TreeMenu.prototype.texts =
{
	"closeTreeTitle"   : "stäng alla mappar",
	"openTreeTitle"    : "öppna alla mappar",
	"closeFolderTitle" : "stäng mapp",
	"openFolderTitle"  : "öppna mapp"
};

Functions

There are some functions available to call after the menu has been stated:

openAll

opens all folders

closeAll

closes all folders

openToNode

open tree so that the node is visible

openToUrl

open tree so the node wit a link to the URL is visible

You call the open/close functions like this:

• myMenu.openAll()
• myMenu.closeAll()

To open the tree to make a specified node visible you do like this:

• myMenu.openToNode(node, setFocus, doClick, e)

The node parameter may be a <li> or <a> element. Using true for the setFocus parameter will give the node focus. Using true for the doClick parameter will simulate a click on the link. The click will attempt to run any event handlers associated with the link. If there is a corresponding frame available, links with the target attribute set will be followed in the correct way.

When used from event handlers, it is also possible to pass the event object to the functions for opening nodes through the e parameter. This is not mandatory.

To open a node corresponding to an URL use:

• myMenu.openToUrl(href, setFocus, doClick, e)

This function is used as openToNode, but instead of a node an URL of a menu item is given. The href value given will be compared to the last part of the URLs, corresponding to the length of the href parameter: be aware that values like "index.html" (with no path) may not give the result you want.