ace精美的树菜单插件

来源:https://www.sucaihuo.com/js/773.html 2016-02-16 19:09浏览(4490) 收藏

这个精美的ace树插件是从素材火后台模板http://www.sucaihuo.com/templates/9.html扒出来的,支持自定义树图标、是否多选、缓存等。
ace精美的树菜单插件
分类:导航菜单 > 树形菜单 难易:高级
查看演示 下载资源 下载积分: 20 积分

树菜单结构

<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
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2