用自定义图片替换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默认的下拉列表模板？

回答

相关问题