<script>
var dataSource=function(parentData, callback)
{
callback( { data:
[//begindata
{
"name": "Aquire",
"type": "folder"
},
{
"name": "Onboard",
"type": "folder"
},
{
"name": "Engage",
"type": "folder",
"dataAttributes": {
"id": "engage-folder"
},
"children": [
{
"name": "Abandoned Cart",
"type": "folder",
"children": [
{
"name": "Archive",
"type": "folder"
}
]
},
{
"name": "Birthday",
"type": "folder"
},
{
"name": "Browse Retargeting",
"type": "folder"
},
{
"name": "Loyalty",
"type": "folder"
},
{
"name": "Newsletter",
"type": "folder"
},
{
"name": "Post-Purchase",
"type": "folder"
},
{
"name": "Promotional",
"type": "folder"
},
{
"name": "Transactional",
"type": "folder",
"children": [
{
"name": "Archive",
"type": "folder"
}
]
},
{
"name": "Wish List",
"type": "folder"
}
]
},
{
"name": "Retain",
"type": "folder"
}
]//data end
}
)
};
$(document).ready(function() {
$("#myTree").tree({
multiSelect: false,
cacheItems: false,
folderSelect: false,
dataSource:dataSource
});
});
</script>
<div class="fuelux">
<ul class="tree fuelux" role="tree" id="myTree">
<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
<div class="tree-branch-header">
<button class="tree-branch-name">
<span class="glyphicon icon-caret glyphicon-play"></span>
<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>
</div>