Fuel UX Boilerplate - Tree

Boilerplate JSFiddle you can use for testing latest 3x Fuel UX release.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="https://www.fuelcdn.com/fuelux/3/js/fuelux.min.js"></script>
<link rel="stylesheet" href="https://www.fuelcdn.com/fuelux/3/css/fuelux.min.css">
<script src="https://www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<body style="padding: 10px;" class="fuelux">
    <!-- tree -->
    <div>
        <ul class="tree tree-folder-select" role="tree" id="myTree1">
            <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                <div class="tree-branch-header">
                    <button class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span>

                    </button>
                    <button class="tree-branch-name">	<span class="glyphicon icon-folder glyphicon-folder-close"></span>
	<span class="tree-label"></span>

                    </button>
                </div>
                <ul class="tree-branch-children" role="group"></ul>
                <div class="tree-loader hide" role="alert">Loading...</div>
            </li>
            <li class="tree-item hide" data-template="treeitem" role="treeitem">
                <button class="tree-item-name">	<span class="glyphicon icon-item fueluxicon-bullet"></span>
	<span class="tree-label"></span>

                </button>
            </li>
        </ul>
    </div>
    <div class="btn-panel">
        <button type="button" class="btn btn-default" id="btnTreeDestroy">destroy and append</button>
        <button type="button" class="btn btn-default" id="btnTreeClearSelected">clear all selected</button>
        <button type="button" class="btn btn-default" id="btnTreeDiscloseVisible">disclose visible</button>
        <button type="button" class="btn btn-default" id="btnTreeDiscloseAll">disclose all</button>
        <button...

CSS

body {
    padding: 20px;
}

JavaScript

// sample method buttons
	$('#btnTreeDestroy').click(function () {
		var $container = $('#myTree1').parent();
		var markup = $('#myTree1').tree('destroy');
		console.log(markup);
		$container.append(markup);
		myTreeInit();
	});

	$('#btnTreeClearSelected').click(function () {
		console.log('Items/folders cleared: ', $('#myTree1').tree('deselectAll'));
	});

	$('#btnTreeDiscloseVisible').click(function () {
		$('#myTree1').tree('discloseVisible');
	});

	$('#btnTreeDiscloseAll').click(function () {
		$('#myTree1').one('exceededDisclosuresLimit.fu.tree', function () {
			$('#myTree1').data('keep-disclosing', false);
		});
		$('#myTree1').tree('discloseAll');
	});

	$('#btnTreeCloseAll').click(function () {
		$('#myTree1').tree('closeAll');
	});

	$('#btnTreeGetValue').click(function () {
		console.log($('#myTree1').tree('getValue'));
	});

	$('#btnTreeValue').click(function () {
		console.log($('#myTree1').tree('selectedItems'));
	});

	var mostRecentlyOpenedFolderId = null;
	$('#btnTreeRefresh').click(function () {
		if (mostRecentlyOpenedFolderId === null) {
			console.log('Please open a folder first. This is only needed for already opened and "DOM cached" folders.');
		} else {
			var $itemToRefresh = $('#' + mostRecentlyOpenedFolderId)
			$('#myTree1').tree('refreshFolder', $itemToRefresh);
		}

	});

	// events
	$('#myTree1').on('loaded.fu.tree', function (e) {
		console.log('#myTree1 Loaded');
	});
	$('#myTree1').on('selected.fu.tree', function (event, selected) {
		console.log('Selected Event: ', selected);
		console.log($('#myTree1').tree('selectedItems'));
	});
	$('#myTree1').on('deselected.fu.tree', function (e, selected) {
		console.log('Deselected Event: ', selected);
	});
	$('#myTree1').on('updated.fu.tree', function (event, selected) {
		console.log('Updated Event: ', selected);
		console.log($('#myTree1').tree('selectedItems'));
	});
	$('#myTree1').on('disclosedFolder.fu.tree', function (event, parentData) {
		mostRecentlyOpenedFolderId =...