Skip to content

Latest commit

 

History

History
executable file
·
104 lines (63 loc) · 3.2 KB

README_NUGET.md

File metadata and controls

executable file
·
104 lines (63 loc) · 3.2 KB
Raw

Tree.js v0.4.0

Tweet npm nuget license discussions Welcome coded by William Troup

🌲 A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.

What features does Tree.js have?

  • Zero-dependencies and extremely lightweight!
  • Full API available via public functions.
  • Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
  • Full CSS theme support (using :root variables).
  • Fully configurable per DOM element.
  • Toggling data on/off support.
  • Customizable tooltips.
  • Expand/Contract data items.
  • Configurable colors for boxes!

What browsers are supported?

All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.

What are the most recent changes?

To see a list of all the most recent changes, click here.

How do I install Tree.js?

You can install the library with npm into your local modules directory using the following command:

npm install jtree.js

How do I get started?

To get started using Tree.js, do the following steps:

1. Prerequisites:

Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:

<!DOCTYPE html>

2. Include Files:

<link rel="stylesheet" href="dist/tree.js.css">
<script src="dist/tree.js"></script>

3. DOM Element Binding:

<div id="tree-1" data-tree-options="{ 'showBoxGaps': true, 'data': [] }">
    Your HTML.
</div>

To see a list of all the available binding options you can use for "data-tree-options", click here.

To see a list of all the available custom triggers you can use for "data-tree-options", click here.

4. Finishing Up:

That's it! Nice and simple. Please refer to the code if you need more help (fully documented).

How do I go about customizing Tree.js?

To customize, and get more out of Tree.js, please read through the following documentation.

1. Public Functions:

To see a list of all the public functions available, click here.

2. Configuration:

Configuration options allow you to customize how Tree.js will function. You can set them as follows:

<script> 
  $tree.setConfiguration( {
      safeMode: false
  } );
</script>

To see a list of all the available configuration options you can use, click here.