Title: Navigation with jsTree: Open parent links and loading new page from leaf links
Topics: blog, jsTree
Date: 2012-10-12

I was tasked with a hierarchical navigation for categories. Parent nodes are supposed to open the tree below and leaf nodes are supposed to take the user to a new page.

It took me a while to get acquainted with jsTree, but I managed to accomplish the following code:

<script type="text/javascript">

$(function () {

$("#navtree").jstree({

"ui" : {

"initially_select" : [ "nav_[cgi category_code]" ]

},

"themes" : { "icons" : false },

"core" : { "initially_open" : [ "nav_[cgi category_root]" ] },

"plugins" : [ "themes", "html_data", "ui" ]

});

$("#navtree").delegate("a","click", function(e) {

if ($("#navtree").jstree("is_leaf", this)) {

document.location.href = this;

}

else {

$("#navtree").jstree("toggle_node", this);

}

});

});

</script>

Please go to the DataIdent Shop in order to see how it works.