Brightree Style Guides

Documentation

Examples and documentation for the Tree Plugin can be found here: jsTree

Simple Tree View

Admin
- Settings
  - Website settings
  - Users settings
    - Users Accounts
    - Users Groups
- Newsletters
  - Newsletter one
  - Newsletter two
  - Newsletter three
- Comments
- Plugins
  - Plugin one
  - Plugin two
- Users
Modules

<div id="simpleTree"> <ul> <li>Admin <ul> <li data-jstree="{"opened":true}">Settings <ul> <li data-jstree="{"type":"file"}">Website settings</li> <li data-jstree="{"opened":true}">Users settings <ul> <li data-jstree="{"selected":true,"type":"file"}">Users Accounts</li> <li data-jstree="{"type":"file"}">Users Groups</li> </ul> </li> </ul> </li> <li data-jstree="{"opened":true}">Newsletters <ul> <li data-jstree="{"type":"file"}">Newsletter one</li> <li data-jstree="{"type":"file"}">Newsletter two</li> <li data-jstree="{"type":"file"}">Newsletter three</li> </ul> </li> <li data-jstree="{"icon":"fa fa-folder-open"}">Comments</li> <li data-jstree="{"opened":true}">Plugins <ul> <li data-jstree="{"type":"file"}">Plugin one</li> <li data-jstree="{"type":"file"}">Plugin two</li> </ul> </li> <li data-jstree="{"icon":"fa fa-user"}">Users</li> </ul> </li> <li data-jstree="{"type":"file"}">Modules</li> </ul> </div> //Javascript function $('#simpleTree').jstree({ 'core' : { 'themes' : { 'responsive': false } }, 'types' : { 'default' : { 'icon' : 'fa fa-folder-open' }, 'file' : { 'icon' : 'fa fa-file' } }, 'plugins' : ['types'] });

Tree View with Checkboxes

Admin
- Settings
  - Website settings
  - Users settings
    - Users Accounts
    - Users Groups
- Newsletters
  - Newsletter one
  - Newsletter two
  - Newsletter three
- Comments
- Plugins
  - Plugin one
  - Plugin two
- Users
Modules

<div id="checkboxesTree"> <ul> <li>Admin <ul> <li data-jstree="{"opened":true}">Settings <ul> <li data-jstree="{"type":"file"}">Website settings</li> <li data-jstree="{"opened":true}">Users settings <ul> <li data-jstree="{"selected":true,"type":"file"}">Users Accounts</li> <li data-jstree="{"type":"file"}">Users Groups</li> </ul> </li> </ul> </li> <li data-jstree="{"opened":true}">Newsletters <ul> <li data-jstree="{"type":"file"}">Newsletter one</li> <li data-jstree="{"type":"file"}">Newsletter two</li> <li data-jstree="{"type":"file"}">Newsletter three</li> </ul> </li> <li data-jstree="{"icon":"fa fa-folder-open"}">Comments</li> <li data-jstree="{"opened":true}">Plugins <ul> <li data-jstree="{"type":"file"}">Plugin one</li> <li data-jstree="{"type":"file"}">Plugin two</li> </ul> </li> <li data-jstree="{"icon":"fa fa-user"}">Users</li> </ul> </li> <li data-jstree="{"type":"file"}">Modules</li> </ul> </div> //Javascript function $('#checkboxesTree').jstree({ 'core' : { 'themes' : { 'responsive': false } }, 'types' : { 'default' : { 'icon' : 'fa fa-folder' }, 'file' : { 'icon' : 'fa fa-file' } }, 'plugins' : ['types', 'checkbox'] });

Tree View with drag & drop

Admin
- Settings
  - Website settings
  - Users settings
    - Users Accounts
    - Users Groups
- Newsletters
  - Newsletter one
  - Newsletter two
  - Newsletter three
- Comments
- Plugins
  - Plugin one
  - Plugin two
- Users
Modules

<div id="dragdropTree"> <ul> <li>Admin <ul> <li data-jstree="{"opened":true}">Settings <ul> <li data-jstree="{"type":"file"}">Website settings</li> <li data-jstree="{"opened":true}">Users settings <ul> <li data-jstree="{"selected":true,"type":"file"}">Users Accounts</li> <li data-jstree="{"type":"file"}">Users Groups</li> </ul> </li> </ul> </li> <li data-jstree="{"opened":true}">Newsletters <ul> <li data-jstree="{"type":"file"}">Newsletter one</li> <li data-jstree="{"type":"file"}">Newsletter two</li> <li data-jstree="{"type":"file"}">Newsletter three</li> </ul> </li> <li data-jstree="{"icon":"fa fa-folder-open"}">Comments</li> <li data-jstree="{"opened":true}">Plugins <ul> <li data-jstree="{"type":"file"}">Plugin one</li> <li data-jstree="{"type":"file"}">Plugin two</li> </ul> </li> <li data-jstree="{"icon":"fa fa-user"}">Users</li> </ul> </li> <li data-jstree="{"type":"file"}">Modules</li> </ul> </div> //Javascript function $('#dragdropTree').jstree({ 'core' : { 'check_callback' : true, 'themes' : { 'responsive': false } }, 'types' : { 'default' : { 'icon' : 'fa fa-folder' }, 'file' : { 'icon' : 'fa fa-file' } }, 'plugins' : ['types', 'dnd'] });