Skip to content

orangehill/jstree-bootstrap-theme

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

jsTree Bootstrap Theme

Since there aren't many jsTree themes out there, we thought we'd make this one freely available. jsTree Bootstrap Theme is created as a part of Proton UI Responsive Admin Panel Theme that we at Orange Hill Development use to build custom admin panels. The theme is compatible with jsTree 3.

A legacy version compatible with jsTree pre 1.0 fix2 is still available on a separate branch (no longer maintained).

What is jsTree?

jsTree is a tree view for jQuery (depends on 1.9.1 or later). It is absolutely free (MIT licence) at http://www.jstree.com/ or at https://github.com/vakata/jstree and supports all modern browsers and IE from version 8 up. jsTree can display trees by parsing HTML or JSON and supports AJAX, it is themeable and easy to configure and customize. Events are fired when the user interacts with the tree. Other notable features are inline editing, drag'n'drop support, fuzzy searching (with optional server side calls), tri-state checkbox support, configurable node types, AMD compatibility, easily extendable via plugins.

Theme Demo

Theme demo is available at jsTree Bootstrap Theme Demo Page .

Responsiveness

jsTree Bootstrap Theme is responsive. To see the effect open the demo and scale a browser window down until the window width is less then 768 pixels.

Mobile friendly design should make it easier to tap nodes with more precision.

Getting Started

Download or checkout the latest copy and include jQuery and jsTree scripts as well as proton theme style file in your web page. Then create an instance (in this case using the inline HTML) with theme name set to proton and responsive (optional) set to true.

<link rel="stylesheet" href="dist/themes/proton/style.min.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.min.js"></script>
<div id="container">
  <ul>
    <li>Root node
      <ul>
        <li id="child_node">Child node</li>
      </ul>
    </li>
  </ul>
</div>
<script>
$(function() {
  $('#container').jstree({
    'core': {
        'themes': {
            'name': 'proton',
            'responsive': true
        }
    }
  });
});
</script>

LESS support

If you wish to further customize the theme you might find it convenient to use included LESS files. The theme also includes a grunt script which you can use to build CSS files.

To develop using grunt files just run grunt (no options required). This will build theme images and CSS.

Do not edit files in the dist subdirectory as they are generated via grunt. You'll find theme source code in the src/themes/proton subdirectory.

About

Reponsive jsTree Twitter Bootstrap 3 Compatible Theme

Resources

License

Stars

Watchers

Forks

Packages

No packages published