0

我正在玩 Kendo UI Web 并寻找根据特定需求自定义它的方法。从我的JS bin中，我简单地添加了带有示例列表项的 Kendo UI 下拉控件，它们的背景需要用各自的颜色呈现。

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

4

1 回答 1

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 引入，除非你想开始使用它，否则你可能会考虑只显示一个带有项目颜色的颜色方块。

您可以执行以下操作：

开始为颜色方块定义 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在此处使用此方法进行了修改

编辑：如果您希望输入的背景获得所选项目的颜色，您应该使用：

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

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

事件处理程序从所选选项change设置值，事件处理程序为初始值设置。inputdataBound

于 2013-08-09T06:53:56.103 回答