Blame |
Last modification |
View Log
| Download
| RSS feed
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Tree View
<small>jquery plugins overview
</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="#/dashboard.html">Home
</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#/tree">jQuery Plugins
</a>
</li>
<li>
<a href="#/tree">Tree View
</a>
</li>
</ul>
<div class="page-toolbar">
<div class="btn-group pull-right">
<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" dropdown-menu-hover data-delay="1000" data-close-others="true">
Actions
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User
</a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event
<span class="badge badge-success">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders
<span class="badge badge-danger">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users
<span class="badge badge-warning">12
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN MAIN CONTENT -->
<div class="row">
<div class="col-md-6">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Default Tree
</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_1" class="tree-demo">
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected
</a>
</li>
<li data-jstree='{ "icon" : "fa fa-briefcase icon-state-success " }'>
custom icon URL
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
<li data-jstree='{ "icon" : "fa fa-warning icon-state-danger" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
<a href="http://www.jstree.com">
Clickanle link node
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Checkable Tree
</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_2" class="tree-demo">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Contextual Menu with Drag
& Drop</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_3" class="tree-demo">
</div>
<div class="alert alert-success no-margin margin-top-10">
Note! Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">Ajax Tree with Drag
& Drop</span>
</div>
<div class="tools">
<a href="javascript:;" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="javascript:;" class="reload">
</a>
<a href="javascript:;" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<div id="tree_4" class="tree-demo">
</div>
<div class="alert alert-info no-margin margin-top-10">
Note! The tree nodes are loaded from demo/jstree_ajax_data.php via ajax.
</div>
</div>
</div>
</div>
</div>
<!-- END MAIN CONTENT -->
<script>
UITree.init(); // init todo page
</script>