MwzBaB

index.html

<ul id="myTree" class="tree tree-folder-select" role="tree" id="myTree">
  <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" 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>

MwzBaB.markdown

MwzBaB

A Pen by Christopher McCulloh on CodePen.

License.

script.js

 var tree = [{
   "id": 'abc1',
   "name": "Ascending and Descending",
   "type": "folder",
   'children': [{
     'id': 'second',
     "text": "Child of Ascending and Descending",
     'type': 'item'
   }]
 }, {
   "id": 'abc2',
   "name": "Sky and Water I",
   "type": "item"
 }, {
   "id": 'abd1',
   "name": "Drawing Hands",
   "type": "folder",
   'children': [{
     "id": 'abd1',
     "name": "CHild of Drawing Hands",
     "type": "folder",
     'children': [{
       'id': 'second',
       "text": "Child of CHild of Drawing Hands",
       'type': 'item'
     }]
   }]
 }, {
   "id": 'vbc1',
   "name": "waterfall",
   "type": "item"
 }, {
   "id": 'abdsd1',
   "name": "Belvedere",
   "type": "folder"
 }, {
   "id": 'abcsd1',
   "name": "Relativity",
   "type": "item"
 }, {
   "id": 'asdbc1',
   "name": "House of Stairs",
   "type": "folder"
 }, {
   "id": 'abs2c1',
   "name": "Convex and Concave",
   "type": "item"
 }];

// Allows you to dynamically decide and swap out what should appear if a folder is empty. First call always returns the trunk/root of tree. Proceeding calls return defaultEmptyContents unless you manually set currentEmptyContents to something else prior to the user disclosing branch
//var defaultEmptyContents = [{'name': '<a href="#">add item</a>', 'type': 'item'}];
var defaultEmptyContents = [];
var currentEmptyContents = tree;
var emptyContents = function emptyContents() {
  var ret = currentEmptyContents;
  currentEmptyContents = defaultEmptyContents;
  return ret;
}

 var staticDataSource = function staticDataSource(chosenBranchData, callback) {
   callback({
     data: chosenBranchData.children || emptyContents()
   });
 }

 $(function() {
   $('#myTree').tree({
     dataSource: staticDataSource,
     multiSelect: false,
     folderSelect: true
   });
 });

scripts

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.7.3/js/fuelux.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//www.fuelcdn.com/fuelux/3.7.3/css/fuelux.min.css" rel="stylesheet" />