Required & optional files

Note, that you could use the minified version along with the lib.js file, which means you only have to include lib.js, tree_component.js and tree_component.css - see below.

Otherwise: only four files are required:

  • source/_lib/jquery.js - the jQuery library.
  • source/_lib/css.js - a small collection of usefull css commands (those enable fast language switching, themes, etc).
  • source/tree_component.js
  • source/tree_component.css

NOTE: Once loaded jsTree also includes the CSS file of the theme you specified.

All other files are optional and needed only in certain scenarios:

  1. XML data source. I will also need to include:
    • source/_lib/sarissa.js - part of the Sarissa library (used for xsl transformations).
    • source/_lib/sarissa_ieemu_xpath.js - same as above.
    • source/_lib/jquery.xslt.js - jQuery XSLT plugin - a jQuery wrapper for Sarissa.
  2. Metadata stored inside nodes. If you don’t know what this is - check out the examples.
  3. Cookie functionality needed. Also include:
Example source
<!-- REQUIRED SCRIPTS AND STYLES -->
<link rel="stylesheet" type="text/css" href="path-to-jsTree/tree_component.css" />

<script type="text/javascript" src="path-to-jsTree/_lib/css.js"></script>
<script type="text/javascript" src="path-to-jsTree/_lib/jquery.js"></script>

<script type="text/javascript" src="path-to-jsTree/tree_component.js"></script>

<!-- required for xml data type -->
<script type="text/javascript" src="path-to-jsTree/_lib/sarissa.js"></script>

<script type="text/javascript" src="path-to-jsTree/_lib/sarissa_ieemu_xpath.js"></script>
<script type="text/javascript" src="path-to-jsTree/_lib/jquery.xslt.js"></script>
<!-- required for metadata rule definitions -->
<script type="text/javascript" src="path-to-jsTree/_lib/jquery.metadata.js"></script>

<!-- required for cookie functionality -->
<script type="text/javascript" src="path-to-jsTree/_lib/jquery.cookie.js"></script>
Example source - minified
<link rel="stylesheet" type="text/css" href="path-to-jsTree/tree_component.css" />

<script type="text/javascript" src="path-to-jsTree/_lib.js"></script>
<script type="text/javascript" src="path-to-jsTree/tree_component.min.js"></script>