我正在尝试向我的 Kendo Multiselect 添加更多功能,以便表现得像一个普通的下拉列表。我希望它有一个箭头或三 Angular 形图标,并在单击该图标时切换和关闭。我怎样才能做到这一点?
最佳答案
对于“kendo multiselect arrow”,这个问题在 Google 上的排名很高。这是我正在使用的更完整的解决方案。 (CSS Manuel 的回答很好——它实际上来 self 在 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()
, 对于示例。
Here's a fiddle证明它工作。到目前为止我发现的唯一问题是,当您从多选中删除项目时,它会导致列表项目关闭。
直到 kendo add this as a feature ,我认为这是我们能做的最好的了!
编辑 - 抱歉,不是 Angular - 尽管如此。
关于javascript - Kendo Multiselect 具有箭头图标和单击时关闭的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31825788/