NodeFire Library

widget  1.0.6

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

static Class NF.widget.hierStructure

Provides methods for handling hierarchial structures. Compatible structures may use any arangment of tags from unordered lists to plain DIVs. Nest different structure types within other structures, e.g. a definition list sub menu nested within a unordered list main menu.

Within your HTML, Specific classNames must be added to identify the elements of the structure...
  • 'nfMain' - Identifies the root structure node. (typically UL, OL, DL tags)
  • 'nfSubC' - Identifies sub container nodes. (apply to the outer most tag wrapping the subs structure root Node or combine with 'nfSubS')
  • 'nfSubS' - Identifies sub structure root nodes. (typically UL, OL, DL tags)
  • 'nfItem' - Identifies item nodes. (typically LI, DT, DD tags)
  • 'nfLink' - Identifies link nodes. (typically A tags)
  • 'nfParent' - Optional, identifies item nodes containing child subs. (Automatically applied by the menu widget.)

Below is an example of a simple unordered list which works with the menu widget. The 'nfPure' class is required by the menu widget and identifies the root Node for the menu object to be created.
<ul class="nfMain nfPure">
    <li class="nfitem"><a class='nfLink' href=''>Main Item 1</a></li>
    <li class="nfitem"><a class='nfLink' href=''>Main Item 2</a>

       <ul class="nfSubC nfSubS">
          <li class="nfitem">Title Item</li>
          <li class="nfitem"><a class='nfLink' href=''>Sub Item 1</a></li>
          <li class="nfitem"><a class='nfLink' href=''>Sub Item 2</a></li>
       </ul>

    </li>
    <li class="nfitem"><a class='nfLink' href=''>Main Item 3</a></li>
    <li class="nfitem"><a class='nfLink' href=''>Main Item 4</a></li>
</ul>

The 'nfLink' and 'nfSubS' Nodes may be wrapped in any number of container Nodes. The 'nfSubC' class name must be moved to the outer most sub container node.
<div class="nfSubC">
    <ul class="nfSubS">
       <li class="nfitem">Title Item</li>
       <li class="nfitem"><div><a class='nfLink' href=''>Sub Item 1</a></div></li>
       <li class="nfitem"><div><a class='nfLink' href=''>Sub Item 2</a></div></li>
    </ul>
</div>

Methods

addItem

Array addItem ( refNode , newItem , addWhere )
Add a new item ('nfItem'). Use the addWhere paramater to target the location. Use the child options if the refNode is a parent container or root Node.
  • "first-child" = Add as the first child of the refNode
  • "last-child" = Add as the last child of the refNode
  • "replace-child" = Remove all refNode children and add as an only child.
  • "before" = Add as a sibling before the refNode.
  • "after" = Add as a sibling after the refNode.
  • "replace" = Replace the refNode with the newNode

Pass the newItem parameter an object literal with the following optional properties...
  • {html:string} Creates a newItem from an HTML string.
  • {element:Node} A Node or HTMLElement object reference to use as the newItem
  • {link:Object} Object literal with the optional properties defined here, added as a child link for the item.
  • {wrap:HTML string | Node} An HTML string or Node to wrap the newItem or newLink in.
  • {text:string} Create a newItem automatically and inserts the text value as the innerHTML.
  • {tag:string} Optionally specify the tag name for items created using the text property.
  • {[? - AttributeName]:[? - value]} Adds the specified attributeName / value pair to the newItems created with the text property above.

To automatically create a new item with a tag matching your structure type, pass newItem an empty object literal (var myItem = {}). To add a child link to the item, attach a second object literal to the link property, e.g.
  • var myItem = {link:{text:"My Link Content",href:"myLink.html"}};

Optionally use the element, or html properties to create a new item with a child link or sub menu, e.g....
  • var myItem = {html:"<li class='nfItem'><a href='myLink.html' class='nfLink'>My Link Content</a></li>"};
  • var myItem = {element:myNode,link:{element:myNode}};

See the nf.widget.menuManager class for similar methods which also re-activate and render your menu objects.

Parameters:
refNode <Node> Add the new Item Node relative to the refNode.
newItem <Object | Object Array> Object literals with properties defining the newItem Nodes to add. {html,element,link,wrap,text,tag,(attribute value pair)}
addWhere <string> Where to add the Node... "first-child", "last-child", "replace-child", "before", "after", "replace"
Returns: Array
Array of newItem nodes added to the structure.

addLink

Node addLink ( refItem , newLink )
Adds a link ('nfLink') to a item Node ('nfItem'). If the item already contains a link, the link will be replaced with the newLink.

Pass the newLink parameter an object literal with the following optional properties...
  • {html:string} Creates a newLink from an HTML string.
  • {element:Node} A Node or HTMLElement object reference to use as the newLink
  • {wrap:HTML string | Node} An HTML string or Node to wrap the newLink in.
  • {text:string} Create a newLink automatically and inserts the text value as the innerHTML.
  • {tag:string} Optionally specify the tag name for links created using the text property. Default tag is Anchor.
  • {[? - AttributeName]:[? - value]} Adds the specified attributeName / value pair to the newLink created with the text property above.
Parameters:
refItem <Node> Reference Item Node.
newLink <Object> Object literal with properties defining the newLink to add as a child of refItem. {html,element,wrap,text,tag(attribute value pair)}
Returns: Node
The newLink Node.

addSub

Node addSub ( refItem , newSub )
Adds a sub container ('nfSubC') to a item Node ('nfItem'). If the item already contains a sub, the sub will be replaced with the newSub. The newSub may contain any number of items and child sub menus.

Pass the newLink parameter an object literal with the following optional properties...
  • {html:string} Creates a newSub from an HTML string.
  • {element:Node} A Node or HTMLElement object reference to use as the newSub
  • {wrap:HTML string | Node} An HTML string or Node to wrap the newSub in.
  • {text:string} Create a newSub automatically and inserts the text value as the innerHTML.
  • {tag:string} Optionally specify the tag name for subs created using the text property.
  • {[? - AttributeName]:[? - value]} Adds the specified attributeName / value pair to the newSub created with the text property above.
Parameters:
refItem <Node> Reference Item Node.
newSub <Object> Object literal with properties defining the newSub to add as a child of refItem. {html,element,wrap,text,tag(attribute value pair)}
Returns: Node
The newSub Node.

getChildSub

Node getChildSub ( Node )
Get the child sub menu of a node. This returns the outer sub container node, 'nfSubC'.
Parameters:
Node <Node> A ancestor Node potentially containing a child sub.
Returns: Node
A child sub menu Node.

getChildSubS

Node getChildSubS ( Node )
Get the child sub menus structural root node. ('nfSubS')
Parameters:
Node <Node> A ancestor Node potentially containing a child sub.
Returns: Node
A child sub menu root Node.

getFirstChildItem

Node getFirstChildItem ( itemNode )
Get the items ('nfItem') first child item ('nfItem').
Parameters:
itemNode <Node> The item Node ('nfItem').
Returns: Node
An item Node ('nfItem').

getItemLink

Node getItemLink ( itemNode )
Gets an item Nodes ('nfItem') child link Node ('nfLink').
Parameters:
itemNode <Node> The item Node ('nfItem').
Returns: Node
A link Node ('nfLink').

getItemsByLevel

Array getItemsByLevel ( rootNode , level )
Get item nodes ('nfItem') by level.
  • getItemsByLevel(0) - Returns the root item Nodes.
  • getItemsByLevel(1) - Returns all sub level 1 item Nodes.
  • getItemsByLevel("level>0") - Returns all sub item Nodes.
  • getItemsByLevel("level==2 && level==3") - Returns all level 2 and 3 sub item Nodes.
Parameters:
rootNode <Node> The root node to search from.
level <int | string> An integer representing the level or a string expression using the variable name 'level'. e.g. ("level>0").
Returns: Array
Array of item Nodes.

getLevel

int getLevel ( Node , rootNode )
Get the level of a Node relative to a root node.
Parameters:
Node <Node> The node to evaluate.
rootNode <Node> Count levels relative to this Node.
Returns: int
Integer representing the level of the Node relative to the rootNode.

getLinksByLevel

Array getLinksByLevel ( rootNode , level )
Get link nodes ('nfLink') by level.
  • getLinksByLevel(0) - Returns the root link Nodes.
  • getLinksByLevel(1) - Returns all sub level 1 link Nodes.
  • getLinksByLevel("level>0") - Returns all sub link Nodes.
  • getLinksByLevel("level==2 && level==3") - Returns all level 2 and 3 sub link Nodes.
Parameters:
rootNode <Node> The root node to search from.
level <int | string> An integer representing the level or a string expression using the variable name 'level'. e.g. ("level>0").
Returns: Array
Array of link Nodes.

getParentMenuContainer

Node getParentMenuContainer ( Node )
Get the parent sub menu container, or if a main menu then return the structural root Node ("nfSubC" or "nfMain").
Parameters:
Node <Node> The child Node.
Returns: Node
The root Node

getParentMenuRoot

Node getParentMenuRoot ( Node )
Get the parent menus structural root Node ("nfSubS" or "nfMain").
Parameters:
Node <Node> The child Node.
Returns: Node
The root Node

getSubsByLevel

Array getSubsByLevel ( rootNode , level )
Get sub nodes ('nfSubC') by level.
  • getSubsByLevel(0) - Returns all child subs of the root node.
  • getSubsByLevel(1) - Returns all level 1 sub Nodes.
  • getSubsByLevel("level>=0") - Returns all sub Nodes.
  • getSubsByLevel("level==2 && level==3") - Returns all level 2 and 3 sub Nodes.
Parameters:
rootNode <Node> The root node to search from.
level <int | string> An integer representing the level or a string expression using the variable name 'level'. e.g. ("level>0").
Returns: Array
Array of sub Nodes.

isHorizontalLayout

boolean isHorizontalLayout ( Node )
Determines if the Nodes child menu items are float:left arranging them horizontally.
Parameters:
Node <Node> A sub root Node or parent item Node.
Returns: boolean

removeNode

Node removeNode ( Node )
Removes a node.
Parameters:
Node <Node> The Node to remove.
Returns: Node
The removed Node.

Modules

Copyright © 2011 OpenCube: Inc. All rights reserved.