用自定義圖片替換Kendo默認的下拉列表模板？

我想要做的是當我點擊我的圖像時，我想讓劍道dorpdownlist向我推薦一些選項。可能嗎？用自定義圖片替換Kendo默認的下拉列表模板？

我試圖用CSS代替dropdownlist的defautl模板，但沒有成功。

在這裏，我嘗試簡單地替換dropdownlist的默認黑色箭頭，但沒有成功。來源：http://docs.kendoui.com/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'); 
}

但我真正想實現的是取代完整ly是kendo下拉列表的默認模板，並代替我的圖片。

來源

2013-03-07 dimitrix

會你介意分享你試過的代碼嗎？ – OnaBai 2013-03-07 13:24:01

對不起。最初的帖子已更新。 – dimitrix 2013-03-07 14:12:03

有幾個問題需要注意：

包含箭頭的HTML元素不是customList後代，但兄弟姐妹的後代。這是因爲KendoUI 裝飾與他人的原始元素。
您只是重新定義background-image，但是您需要重新定義兩個額外的CSS屬性：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; 
}

如果您沒有問題重新定義每個額外的元素OR你這樣做編程方式定義一個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-07 17:41:09 OnaBai

用自定義圖片替換Kendo默認的下拉列表模板？

回答

相關問題