create navigation tree menu in Browser or NodeJs environment small plugin that dependence on jQuery and jsdom
see demo
<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>
<div id="tree"></div>
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.
To include navitree in Node, first install with npm.
npm install navitree
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
*/
// in node
var navitree = require('navitree');
// or in Browser jsut use global navitree
navitree
set the data that is an array of JSON objects
set the property which treating as children
set the property which treating as parent
set the property form which getting a url content
tell which id of a html element that the tree menu would be rendered in
set iframe's name
set the property from which getting the displayname content
would return tree infomation of JSON Object
would return tree menu of html string ,such as
- ...
npm run gulp
see test