breadcrumb导航菜单就像A> B> C,有人知道kendo ui有那个小部件吗?
答案 0 :(得分:4)
我提出了这个解决方案。请注意,此示例中未导入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>
答案 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);
}
});