NodeFire Library

menu  1.0.6

NodeFire Library > menu > NF.widget.menu
Search:
 
Filters

Class NF.widget.menu

Create or convert existing HTML lists and pure CSS navigation menus to enhanced scripted widgets on the fly. Operates on any hierarchial HTML based tag concept or combination of nested concepts such as unordered lists, definition lists, divs, and more. Seemlesly switch control from pure CSS to the widget. Apply a wealth of timing, design, animation, and node manipulation features.

The menu object uses NF.widget.hierStructure to access and control the menu structure Nodes. When a new instance of the menu class is constructed the object is registered with NF.widget.menuManager. Methods for manipulating nodes are available in both the menuManager and hierStructure classes.

Constructor

NF.widget.menu ( rootNode , config )
Parameters:
rootNode <Node | HTML string | Node ID> The root node of the menu. Pass the parameter a Node, the id of a Node, or an HTML string.
config <Object> Object literal specifying the configuration properties for the menu. Options include...
  • {showTimerMS : int} - The time (in milliseconds) between hovering over a menu item and showing the sub menu.
  • {hideTimerMS : int} - When hovering over new items this is the time (in milliseconds) required to ellapse before closing the old items sub menu.
  • {itemTrigger : String | Array} - Set to ("mouseover", "click") - A string or array of strings defining the event that will trigger an active state for each level of menu items starting at menu level 0. If the menu contains more levels than the array defines, the last array item trigger will be applied to the higher levels. Default is "mouseover" for all levels.
  • {menuTrigger : String | Array} - Set to ("mouseover", "click", "none") - A string or array of strings defining the event that will trigger the closing of a subs child menus (occurs when an event is fired on a main or sub container itself vs. an item). When using an array, the first item defines the main menu (level 0). If the menu contains more levels than the array defines, the last array item trigger will be applied to the higher levels. Default is the value defined using the 'itemTrigger' or 'mouseover' for all levels.
  • {documentTrigger : String} - Set to ("mouseover", "click", "none") - The document level event which triggers the closing of all sub menus. Default is "mouseover".
  • {collapseOnClick : Boolean} - When true any active sub menus will close after clicking on a 'nfItem' menu link.
  • {stickyHover : Boolean} - When true the hover styles and item animation effects remain applied while the items child sub is visible.
  • {treeStyle : String} - ("standard",false) - A string indicating the stype of tree menu functionality.

Properties

container - Object

The container node for the menu. This is usefull for main menu objects, for sub menu objects the container is always the same as the root node.

params - Object

Object literal containing the menu configuration properties.

root - Node

The root menu node.

Methods

activate

void activate ( )
Activates the menu. The following functions are performed during activation...
  • The menu's interactivity and optionally, the CSS styling, is switched from pure CSS to a scripted widget.
  • The root Nodes 'nfPure' className is replaced with 'nfScripted'.
  • Events for running the scripted menu are attached to the structure Nodes and document Node.
  • Any added replicator objects produce and render clones.
  • The state of the menu at the time of activation is preserved for a seemless transition.
  • Several item and sub dimensions are calculated and applied to the structure as inline styles to fix IE 6 and 7 bugs.

This method may be called multiple times, it's not an object initializer. Use it to re-render your menu if replicators, structure nodes, or style changes warrant an update.
Returns: void

addReplicator

void addReplicator ( Replicator )
Adds a replicator object to the menu. The replicator will run when calling NF.widget.menu.activate. The replicator creates and renders clones based on the configuration paramaters of the replicator added. Multiple replicators may be added.
Parameters:
Replicator <Object> A replicator object.
Returns: void

getActiveItem

Node getActiveItem ( )
Get the active item Node, if any. A Item is active while its child sub menu is visible. This method returns the highest level or currently active item.
Returns: Node
A Node representing the current active item.

getActiveSub

Node getActiveSub ( )
Get the active sub container Node, if any. A sub is active when it's visible. This method returns the highest level or currently active sub.
Returns: Node
A Node representing the current active sub.

getFocusLink

Node getFocusLink ( )
Broken Fix!!!!!!!!!**************** /** Get the current link Node with keyboard focus styles applied, if any.
Returns: Node
A Node representing the focused link.

getHoverLink

Node getHoverLink ( )
Broken Fix!!!!!!!!!**************** /** Get the current link Node with mouse hover styles applied, if any.
Returns: Node
A Node representing the hovered link.

getInteractionItem

Node getInteractionItem ( )
Get the current item recieving user interaction, if any.
Returns: Node
A Node representing the item recieving user interaction.

getStructureNodes

object getStructureNodes ( level )
Spiders the menu and returns an object literal containing all the sub menu and item Nodes. The returned structure Nodes can be filtered using the level paramter. The main menu starts at level 0. Below are some examples of how to use the level parameter...
  • getStructureNodes(0) - Returns the main menu root node and associated item nodes.
  • getStructureNodes(1) - Returns all level 1 sub menu root nodes and associated item nodes.
  • getStructureNodes("level>0") - Returns all sub nodes and associated item nodes.
  • getStructureNodes("level==2 && level==3") - Returns all level 2 and 3 sub menu nodes and associated item nodes.
Parameters:
level <Int | String> An integer representing the level or a string expression using the variable name 'level'. e.g. ("level>0").
Returns: object
Object literal contining an Array of all menu container and item Nodes. {SubC:Array, Item:Array}

removeReplicator

boolean removeReplicator ( Replicator )
Removes a replicator object from the menu.
Parameters:
Replicator <Object> A replicator object to remove.
Returns: boolean
True if found and removed.

removeReplicatorClones

void removeReplicatorClones ( Replicator )
Removes a replicators clones from the menu.
Parameters:
Replicator <Object> A Replicator object.
Returns: void

Events

collapseMenu

collapseMenu ( event )
Fires on a NF.widget.menu object when an event triggers the collapse of all active subs.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:object} The menu object which dispatched the event.

hideSub

hideSub ( event )
Fires on a sub Node ('nfSubC') when hidden. If an animation is hooked to hide sub, the event is fired after the animation renders.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.
  • {subNode:Node} The parent item of the sub Node.

itemActivated

itemActivated ( event )
Fires on an item Node ('nfItem') when made active. Items become active when a child sub of the item is shown. If an animation is hooked to show sub, activation occurs before the animation starts to play.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.
  • {subNode:Node} The sub ('nfSubC') Node which was made visible.

itemDeactivated

itemDeactivated ( event )
Fires on an item Node ('nfItem') when deactivated. Items deactivate when a child sub of the item is hidden. If an animation is hooked to hide sub, deactivation occurs before the animation starts to play.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.

linkFocusHide

linkFocusHide ( event )
Fires on a link Node ('nfLink') when focus styles are hidden.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.

linkFocusShow

linkFocusShow ( event )
Fires on a link Node ('nfLink') when focus styles are shown.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.

linkHoverHide

linkHoverHide ( event )
Fires on a link Node ('nfLink') when hover styles are hidden.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.

linkHoverShow

linkHoverShow ( event )
Fires on a link Node ('nfLink') when hover styles are shown.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.

menuRendered

menuRendered ( event )
Fires on a NF.widget.menu object when the menu is activated or updated. Rendering updates occur automatically in response to some edits such as structural changes made through the menuManager.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:object} The menu object which dispatched the event.
  • {rootNode:Node} The root node of the menu object.

replicatorCloneCreated

replicatorCloneCreated ( event )
Fires when a replicator attached to the menu creates a clone for one of the menus Nodes.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The menu Node which recieved the replicated clone.
  • {menu:Node} The NF.widget.menu object which the target Node belongs to.
  • {replicator:Object} The NF.replicator object which created the clone.
  • {clone:Object} The clone which was created.

showSub

showSub ( event )
Fires on a sub Node ('nfSubC') when made visible.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Node} The Node which dispatched the event.
  • {menu:object} The Nodes NF.widget.menu object.
  • {subNode:Node} The parent item of the sub Node.

Properties

Copyright © 2012 OpenCube: Inc. All rights reserved.