溢出

立即下載Kendo UI for jQuery

當(dāng)Breadcrumb的寬度不足以顯示整個(gè)路徑時(shí)組件將只顯示適合可用空間的項(xiàng)，其余的將被隱藏起來。如果單擊其中一個(gè)可見項(xiàng)，則組件的值將更改并顯示先前隱藏的項(xiàng)。

下面的示例演示了該特性。

<nav id="breadcrumb" style="width:300px"></nav>

<script>
$("#breadcrumb").kendoBreadcrumb({
items: [
{ type: "rootitem", href: "mysite.com", text: "Telerik UI", icon: "globe", showIcon: true, showText: true },
{ type: "item", href: "/navigation", text: "Navigation", icon: "cloud", showText: true, showIcon: false },
{ type: "item", href: "/breadcrumb1", text: "Folder1", showText: true },
{ type: "item", href: "/breadcrumb2", text: "Folder2", showText: true },
{ type: "item", href: "/breadcrumb3", text: "Folder3", showText: true },
{ type: "item", href: "/breadcrumb4", text: "Folder4", showText: true },
{ type: "item", href: "/breadcrumb5", text: "Folder5", showText: true },
{ type: "item", href: "/breadcrumb6", text: "Folder6", showText: true },
{ type: "item", href: "/breadcrumb7", text: "Folder7", showText: true },
{ type: "item", href: "/breadcrumb8", text: "Folder8", showText: true },
{ type: "item", href: "/breadcrumb9", text: "Folder9", showText: true },
{ type: "item", href: "/breadcrumb10", text: "Folder10", showText: true},
],
editable:true
});
</script>