<!-- BEGIN PAGE BREADCRUMB -->
<ul class="page-breadcrumb breadcrumb">
	<li>
		<a href="#">Home</a><i class="fa fa-circle"></i>
	</li>
	<li>
		<a href="#">jQuery Plugins</a><i class="fa fa-circle"></i>
	</li>
	<li class="active">
		Tree View
	</li>
</ul>
<!-- END PAGE BREADCRUMB -->
<!-- BEGIN MAIN CONTENT -->
<div class="row">
	<div class="col-md-6">
		<div class="portlet light">
			<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">
			<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">
			<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">
			<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>
