Kendo ui是否有面包屑导航菜单

时间:2014-08-12 06:50:26

标签: javascript kendo-ui

breadcrumb导航菜单就像A> B> C,有人知道kendo ui有那个小部件吗?

2 个答案:

答案 0 :(得分:4)

我提出了这个解决方案。请注意,此示例中未导入Kendo类,因此它不会显示正确的结果。请导入kendo css类以获得正确的结果,如下面的屏幕截图所示。 enter image description here

$("#tree").kendoTreeView({
    select: function(e) {
        var breadcrumb = [];
        var treeView = this;

        $(e.node)
            .parents("li")
            .andSelf()
            .each(function() {
                var nodeText = $.trim(treeView.text(this));
                breadcrumb.push(nodeText);
            });

        breadcrumb = breadcrumb.join(" > ");

        $("#breadcrumb").text(breadcrumb);
        
    }
    
});


        
.k-bot{
    float:left;

}
.k-item{
 margin:20px;
}
.k-icon{
margin-left:0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Breadcrumb Trail: <span id="breadcrumb">Root</span>

<ul id="tree">
    <li>Root
        <ul>
            <li>Parent 1
                <ul>
                    <li>Child 1</li>
                 </ul>
            </li>
        </ul>
    </li>
</ul>

答案 1 :(得分:2)

按照KendoMenu的Breadcrumb示例:

$("#menu").kendoMenu({
select: function(e) {
    var breadcrumb = [];
    var treeView = this;

    $(e.item)
        .parents("li")
        .andSelf()
        .each(function() {
            var nodeText = $.trim($(this).find('span:first').text());
            breadcrumb.push(nodeText);
        });

    breadcrumb = breadcrumb.join(" > ");

    $("#breadcrumb").text(breadcrumb);                        
}
});

jsfiddle