Javascript 向selectmenu添加自定义图标
我正在使用JQuery和jqueryui 我按照jqueryui演示中的示例进行自定义渲染,向select菜单项添加图标,效果很好。我遇到的问题是将所选图标添加到用户单击以显示菜单的按钮。我按照找到的已接受的答案进行操作,结果显示了一个图标,但它没有显示我想要的自定义图标,而是显示了一个标准图标。我已经尝试了许多不同的CSS变体,并为图标的跨度添加了类,但我无法正确实现。当我检查Chrome中的元素时,它总是显示从“ui按钮ui图标”类派生的图像,而不是我的自定义图标类。我需要CSS和类的什么组合才能使它正确显示 我有一个selectmenu,定义如下:Javascript 向selectmenu添加自定义图标,javascript,jquery,html,css,jquery-ui-selectmenu,Javascript,Jquery,Html,Css,Jquery Ui Selectmenu,我正在使用JQuery和jqueryui 我按照jqueryui演示中的示例进行自定义渲染,向select菜单项添加图标,效果很好。我遇到的问题是将所选图标添加到用户单击以显示菜单的按钮。我按照找到的已接受的答案进行操作,结果显示了一个图标,但它没有显示我想要的自定义图标,而是显示了一个标准图标。我已经尝试了许多不同的CSS变体,并为图标的跨度添加了类,但我无法正确实现。当我检查Chrome中的元素时,它总是显示从“ui按钮ui图标”类派生的图像,而不是我的自定义图标类。我需要CSS和类的什么组
<select name="sourceIcon" id="jsSourceIconSelect">
<option value="AM-FM-2" data-class="am-fm">AM-FM</option>
<option value="CD-2" data-class="cd">CD</option>
<option value="Climate-2" data-class="climate">Climate</option>
<option value="Display-Alt-2" data-class="display-alt">Display Alt</option>
<option value="Display-2" data-class="display">Display</option>
<option value="DVR-2" data-class="dvr">DVR</option>
<option value="Energy Management-2" data-class="energy-management">Energy Management</option>
<option value="Favorites-2" data-class="favorites">Favorites</option>
<option value="Film Reel-2" data-class="film-reel">Film Reel</option>
<option value="Home-2" data-class="home">Home</option>
</select>
编辑:我想我应该为一些图标添加css:
.ui-icon.am-fm{ background-position: 0 0; }
.ui-icon.cd{ background-position: -32px 0; }
.ui-icon.climate{ background-position: -64px 0; }
.ui-icon.display-alt{ background-position: -96px 0;}
.ui-icon.display{ background-position: -128px 0;}
.ui-icon.dvr{background-position: -160px 0;}
.ui-icon.energy-management{ background-position: -192px 0;}
.ui-icon.favorites{background-position: -224px 0;}
.ui-icon.film-reel{background-position: -256px 0;}
.ui-icon.home{background-position: -288px 0;}
我在selectmenu中处理自定义图标的方法是将position-x和position-y更改为正常设置,因为这是图像未显示的原因。 我刚刚制作了以下css:
.ui-icon {
background-image: url("/Images/dropdown-icon_2018-10-03/dropdown-icon.png");
background-position-x: 0;
background-position-y: 5px;
}
在OP i中使用selectmenu示例得出以下解决方案:
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#people")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="avatar-selected"> ').html(" ").appendTo(widget);
$span.attr("style", $(this).children(":first").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
.ui-icon {
background-image: url("/Images/dropdown-icon_2018-10-03/dropdown-icon.png");
background-position-x: 0;
background-position-y: 5px;
}
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#people")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="avatar-selected"> ').html(" ").appendTo(widget);
$span.attr("style", $(this).children(":first").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
.ui-selectmenu-menu .ui-menu.avatar .ui-menu-item-wrapper {
padding: 2px 10px 0 30px;
}
.ui-selectmenu-menu .ui-menu.avatar .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-selectmenu-text {
padding-left: 2em;
}
.avatar-selected {
position:absolute;
height: 24px;
width: 24px;
right:auto;
margin-top:-12px;
top:50%;
background-repeat:no-repeat;
}