3

通常のドロップダウン リストのように動作させるために、Kendo Multiselect にさらに機能を追加しようとしています。矢印または三角形のアイコンがあり、そのアイコンをクリックするとトグルして閉じます。どうすればこれを達成できますか？

4

1 に答える 1

7

この質問は、「kendo multiselect arrow」について Google で非常に高く評価されています。これが私が使用しているより完全なソリューションです。(マヌエルが答えた CSS は問題ありません。実際には、Telerik フォーラムの私の投稿からのものです!)。

ドロップダウン矢印を追加する CSS:

.k-multiselect:after {
content: "\25BC";
position: absolute;
top: 30%;
right: 25px;
font-size: 12px;
}

開いたときに横向きの矢印にするトリック：

CSS

.k-multiselect.opened:after {
content: "\25C0";
}

JS

var Globals = {};

$('#foo').kendoMultiSelect({
    ...
    open: function(){
       $(this.element).parent().addClass('opened'); // ▼ becomes ◀
       Globals.MultiSelectIsOpening = true;
       setTimeout(function(){
           Globals.MultiSelectIsOpening = false;
       }, 100);
    },
    close: function(){
        $(this.element).parent().removeClass('opened');
    }
    ...
});

$('#foo_container').on('click', '.k-multiselect', function () {
    if (!Globals.MultiSelectIsOpening) {
        $('#foo').data('kendoMultiSelect').toggle();
    }
});

#foo_containerは動的に解決でき$('#foo').parents('.k-multiselect').parent()、たとえば - である必要があります。

これが機能することを示すフィドルです。これまでに見つけた唯一の問題は、複数選択から項目を削除すると、リスト項目が閉じられることです。

剣道がこれを機能として追加するまでは、これが私たちにできる最善のことだと思います!

編集-申し訳ありませんが、Angularではありません-それでもHTHです。

于 2015-12-11T12:30:31.217 に答える