0

私は Kendo UI Web で遊んでいて、特定のニーズに合わせてカスタマイズする方法を見つけています。私のJS ビンから、それぞれの色で背景をレンダリングする必要があるサンプル リスト項目を含む 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 に答える