mooTree documentation
Welcome to the mooTree documentation page. For a quick start guide, take a look at the demo page. The plugin includes three classes: mooTree, mooTreeList and mooTreeListElement.
mooTree
This class acts as a wrapper, it prepares the ul element passed and applies the expand_top option if set to true. Then constructs the main list mooTreeList object which does all the left work.
constructor
Constructs a mooTree instance. The syntax is:
var myinstance = new mooTree(element, options)
- element: (mixed) the id or the ul element itself
The options parameter is an object of global options used by the class.
The available options are:
- expand_top: (bool) default false. Whether to expand the first tree or not
- collapsed: (bool) default true. Whether to collapse the tree or not
- expand_level: (int) default null. The tree level to expand. Level 0 are all the first voices (always shown).
mooTreeList
This class represents a list object (ul tag).
constructor
Constructs a mooTreeList instance. The syntax is:
var myinstance = new mooTreeList(element, level, options)
- element: (element). The dom element.
- level: (int). The tree level.
- options: (object). The option to pass to every mooTreeListElement object.
collapse
Hides the list. The syntax is:
myinstance.collapse()
expand
Shows the list. The syntax is:
myinstance.expand()
mooTreeListElement
This class represents a list item object (li element).
constructor
Constructs a mooTreeListElement instance. The syntax is:
myinstance = new mooTreeListElement(element, level, options)
- element: (element). The dom element.
- level: (int). The tree level
The options parameter is an object of global options used by the class.
The available options are:
- collapsed: (bool) default true. Whether to collapse the tree or not
- expand_level: (int) default null. The tree level to expand. Level 0 are all the first voices (always shown).
addController
adds the expand/collapse controller to the list item, it's automatically called if the item has children. The syntax is:
myinstance.addController()
toggle
toggles the expanded/collapsed status of the item sublist. The syntax is:
myinstance.toggle()
setController
updates the controller reflecting the collapse/expand action. The syntax is:
myinstance.setController()
collapseChildren
basing upon given options and data attribute returns true if the item sublist should be collapsed, false otherwise. The syntax is:
myinstance.collapseChildren()
Data attribute and selected item
Some behaviors may be controlled directly by html attributes. The plugin detects the presence of a data-expanded attribute; if it is set to 1 then the li element which has it is expanded, in other words it's sub list is shown.
Also it's possible to mark an item as selected, this is done by giving it a "selected" css class attribute. In this case the selected element is always shown.
Styling
When creating a mooTree instance che main ul element receive the moo_tree class attribute. The controllers used to expand/collapse sublists take a class attribute moo_tree_ctrl plus respectively moo_tree_more or moo_tree_less. So it's possible to style the tree as you wish only through css.