树菜单结构

<div id="tree1" class="tree tree-selectable">
    <div class="tree-folder" style="display:none;"> 
        <div class="tree-folder-header"> 
            <i class="icon-plus"></i> 
            <div class="tree-folder-name"></div> 
        </div> 
        <div class="tree-folder-content"></div> 
        <div class="tree-loader" style="display: none;"></div> 
    </div> 
    <div class="tree-item" style="display:none;"> 
        <i class="icon-remove"></i> 
        <div class="tree-item-name"></div> 
    </div>
    <div class="tree-folder" style="display: block;"> 
        <div class="tree-folder-header"> 
            <i class="icon-plus"></i> 
            <div class="tree-folder-name">
                For Sale
            </div> 
        </div> 
        <div class="tree-folder-content"></div> 
        <div class="tree-loader" style="display: none;">
            <div class="tree-loading">
                <i class="icon-refresh icon-spin blue"></i>
            </div>
        </div> 
    </div>
</div>

引入ace和树插件

<script src="tree_files/ace.min.js"></script> 
<script src="tree_files/fuelux.tree.min.js"></script>

$('#tree1').ace_tree({
    dataSource: treeDataSource,
    multiSelect: true,
    loadingHTML: '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
    'open-icon': 'icon-minus',
    'close-icon': 'icon-plus',
    'selectable': true,
    'selected-icon': 'icon-ok',
    'unselected-icon': 'icon-remove',
    cacheItems: true
});