1

私がやりたいことは、自分の画像をクリックしたときに、剣道の dorpdownlist にいくつかのオプションを提案してもらいたいということです。出来ますか ？

ドロップダウン リストのデフォルト テンプレートを CSS に置き換えようとしましたが、成功しませんでした。

ここでは、ドロップダウンリストのデフォルトの黒い矢印を単純に置き換えようとしましたが、成功しませんでした。ソース : http ://docs.kendoui.c​​om/getting-started/web/appearance-styling?x=54&y=12

------------------------------HTML

<select id="customList" class="k-widget k-dropdown"></select>

-----------------------------Javascript

$("#customList").kendoDropDownList().data("kendoDropDownList");

------------------------------CSS

#customList .k-icon .k-i-arrow-s
{
    background-image:url('../../resources/img/components/addtab.png');
}

しかし、私が本当に達成したいのは、剣道ドロップダウンリストのデフォルトのテンプレートを完全に置き換え、代わりに自分の画像を使用することです.

4

1 に答える 1

1

心に留めておくべき質問がいくつかあります。

  1. 矢印を含む HTML 要素は、兄弟の子孫ではなくcustomList、兄弟の子孫です。これは、KendoUIが独自の要素を他の要素で装飾するためです。
  2. 再定義するだけbackground-imageですが、再定義する必要がある追加の CSS 属性が 2 つありbackground-positionます。これは、アイコンbackground-sizeをオフセットするために Kendo UI CSS ファイルで定義されているためです。k-i-arrow-s

したがって、次のいずれかを行う必要があります。

span.k-icon.k-i-arrow-s {
    background-image:url('../../resources/img/components/addtab.png');
    background-size: 16px 16px;
    background-position: 0 0;
}

すべての追加要素を再定義しても問題ない場合、またはプログラムで CSS を定義する場合:

.ob-style {
    background-image:url('../../resources/img/components/addtab.png');
    background-size: 16px 16px;
    background-position: 0 0;
}

そして JavaScript:

var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
于 2013-03-07T17:41:09.350 に答える