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

Question

breadcrumb导航菜单就像A＆gt; B＆gt; C，有人知道kendo ui有那个小部件吗？

Answer 1

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

$("#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>

Answer 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