A jquery plugin transforming a html list in a spacetree graph
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.markdown
excanvas.js
jit.js
jquery.spacetree.css
jquery.spacetree.js
license.txt
test.html

README.markdown

JQuery.spacetree

This plugin transform a tree structured html into a spacetree using Javascript Infovis Toolkit (http://thejit.org)

How to use

Launch with: $(htmltree_selector).spacetree(spacetree_selector, settings, jitsettings, onClickOptions);

Minimal example: $('#tree').spacetree('#spacetree');

Parameters

htmltree_selector

A css selector to the HTML tree.

spacetree_selector

A css selector pointing to the container where the spacetree will be drawn

settings

A Javascript object containing a group of function. These function will overrides the default functions used to extracting the tree informations. These are:

  • getData($node) $node is a node of the html tree (jQuery object) returns an object. This object will be the 'data' object of each node (see the jit documentation). Important: the object must contain a '$content' field with the label to print on each spacetree node.

  • getId($node) $node is a node of the html tree (jQuery object) returns the unique identifier of a node (string)

  • getChildrenNodes($node) $node is a node of the html tree (jQuery object) returns a list of nodes (sons of the current node)

  • getSelected: function($tree) $tree is the first node of the html tree (jQuery object) It returns the selected node (a jQuery object)

jitsettings

configuration of spacetree see the official documentation:

onClickOptions

See the onClick documentation on: http://thejit.org/static/v20/Docs/files/Visualizations/Spacetree-js.html

Default html markup

This is an example of the default html:

<div id="tree">
    <div id="root">root element content</div>
    <ul>
        <li>
            <div id="child1">child element content</div>
            <ul>
                <li>
                    ...
                </li>
            </ul>
        </li>
        <li>
            <div id="child2" class="selected">child element content</div>
        </li>
    </ul>
</div>