navitree

create navigation tree menu in Browser or NodeJs environment small plugin that dependence on jQuery and jsdom

example

see demo

in Browser

Script tag

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://pomco.github.io/navitree/built/navitree.min.js"></script>

html content

<div id="tree"></div>

javascript statement

navitree.data(demoData).child("name").parent("parent").render("tree");
/**
 *  @  demoData an array that contain several of JSON Object.
 *  @  child("name"), treat the property (i.e. 'name') of JSON Object as 'child'
 *  @  similarly, parent("parent") ,treat the property (i.e 'parent') of JSON Object as 'parent'
 *  @  render("tree") , render the tree menu in html element whose id is 'tree'
 */

about 'demoData' e.g. see also some demo.

in node

install

To include navitree in Node, first install with npm.

npm install navitree

usage

var navitree = require('navitree');
navitree.data(demoData).child("name").parent("parent").render("tree");

console.log(navitree.html());
/**
 *  navitree.html() would return tree menu of html string ,such as <ul>.*</ul>
 */
console.log(navitree.tree());
/**
 *  navitree.tree() would return tree infomation of JSON Object
 */

API

// in node 
var navitree = require('navitree');
// or in Browser jsut use global navitree
navitree

navitree.data(arr)

set the data that is an array of JSON objects

navitree.child(str)

set the property which treating as children

navitree.parent(str)

set the property which treating as parent

navitree.url(str)

set the property form which getting a url content

navitree.render(str)

tell which id of a html element that the tree menu would be rendered in

navitree.iframeName(str)

set iframe's name

navitree.menuName(str)

set the property from which getting the displayname content

navitree.tree()

would return tree infomation of JSON Object

navitree.html()

would return tree menu of html string ,such as ...

Run Unit Test

in node

npm run gulp

in Browser

see test