css - Kendo UI Web - 下拉列表，每个列表项的背景颜色不同。

Question

我正在玩 Kendo UI Web 并寻找根据特定需求对其进行自定义的方法。 来 self 的 JS bin我只是添加了带有示例列表项的 Kendo UI 下拉控件，它们的背景需要用相应的颜色呈现。

我花了一些时间检查元素以改变其样式，但尚未找到控制每个列表项的解决方案。有没有人有这方面的经验？

Answer 1

有一个容易的部分和一个困难的部分。容易的是获得背景，难的是让它看起来漂亮。

很简单，定义一个模板来呈现每个列表项:

<script id="template" type="text/kendo-tmpl">
    <div style="background-color: #= text #;">#= text #</div>
</script>

然后将您的 ComboBox 定义为:

$(document).ready(function () {
    $('#combobox').kendoComboBox({
        template : $("#template").html()
    });
});

但是自<div> 之前，这可能没有您想要的那么好。在我的模板中有一个 <li>由 KendoUI 引入，除非您想开始使用它，否则您可能会考虑只显示一个带有元素颜色的颜色方 block 。

你可以这样做:

开始为颜色方 block 定义 CSS:

.ob-patch {
    margin: 4px 6px 0 0 !important;
    height: 14px;
    width: 14px;
    float: left;
    border: 1px solid black;
}

然后每个元素的模板将是:

<script id="template" type="text/kendo-tmpl">
    <div>
        <div style="background-color: #= text #;" class="ob-patch">&nbsp;</div>
        #= text #
    </div>
</script>

和组合框初始化:

$('#combobox').kendoComboBox({
    template: $("#template").html()
});

你的 JS Bin 用这种方法修改了 here

编辑:如果您希望输入的背景获得所选元素的颜色，您应该使用:

function setColor() {
    var val = this.value();
    this.input.css("background-color", val);
}

$("#combobox").kendoComboBox({
    template : $("#template").html(),
    dataBound: setColor,
    change   : setColor
});

哪里change事件处理程序设置 input 的值从选择的选项和dataBound事件处理程序为初始值执行此操作。