MenuTree ()
documon/template/assets/js/documon/menutree/MenuTree.js
69
Builds a menu based on a "menu array". The menu array must conform to the following structure:
var myMenuData = [
{
"id" : "foo", // Unique ID used to identify a menu list item.
"url" : "foo.html", // (optional) The URL to open when the menu item is clicked.
"label" : "foo", // The display text for the menu item.
"kind" : "myCssRule", // The CSS class to apply to the item -- good for including icons!
"children" : [] // An array of menu item just like this one.
}
... etc...
];When an item has children, a sub-menu will be constructed as the immediate "nextSibling" UL,
which will house all the items within the "children" array. Thus, one may have as many sub-menus as needed.
The menu will be build using the following HTML structure:
<ul>
<li>foo</li> <-- opener - used to open/close the next immediate sibling UL
<ul>
<li>foo</li>
<li>foo</li>
</ul>
<li>foo</li>
<li>foo</li>
<li>foo</li> <-- opener - used to open/close the next immediate sibling UL
<ul>
<li>foo</li>
<li>foo</li> <-- opener - used to open/close the next immediate sibling UL
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
<li>foo</li>
<li>foo</li>
</ul>
</ul>Example
// For now, the only action we ping is "select"
function opHandler(action, item){
if(action == "select"){
//con sole.log(item);
}
}
var myMenu = new gieson.MenuTree({
callback : opHandler,
menuData : MenuData // MenuData should be located on the window object, since it is loaded in via <script src="_menuData.js">
});