Menu nawigacji w breadcrumbu, podobnie jak A> B> C, czy ktoś wie, że ktenodził Ui ma ten widget?

4
liminche 12 sierpień 2014, 10:50

2 odpowiedzi

Najlepsza odpowiedź

Wymyśliłem to rozwiązanie Proszę zaimportować klasy Kendo CSS, aby uzyskać poprawne wyniki, jak pokazano poniżej w zrzucie ekranu. Wpisz opis obrazu tutaj

$("#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>
4
Ruby 22 styczeń 2015, 08:49

Podąża za przykładem breadcrump dla Kendomenu:

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

2
Soner Gönül 6 sierpień 2015, 17:57