Question

我正在使用JQuery＆amp; JQuery UI。

我按照JQuery UI演示中的示例进行自定义渲染，以便向选择菜单项添加图标，这些项目运行良好。我遇到的问题是将所选图标添加到用户单击以显示菜单的按钮。我按照接受的答案here，我有一个图标显示，但它没有显示我想要的自定义图标，它显示了一个标准图标。我已经为CSS尝试了许多不同的变体，并为图标的跨度添加了类，但我无法正确使用它。当我在Chrome中检查元素时，它总是将图像显示为来自“ui-button ui-icon”类，而不是我的自定义图标类。我需要什么样的CSS和类组合才能使它正确显示？

我的selectmenu定义如下：

<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>

以及相关的javascript：

$.widget("custom.iconselectmenu", $.ui.selectmenu, {
            _renderItem: function(ul, item) {
                var li = $("<li>"),
                wrapper = $("<div>",{text: item.label});

                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);
            }
        });

        $("#jsSourceIconSelect").iconselectmenu({
            select: function(event, ui){
                $("#" + this.id + "ImgSelected").attr("class","ui-icon" + ui.item.element.data("class"));
            },
            create: function(event, ui){
                var widget=$(this).iconselectmenu("widget");
                $span = $('<span id="' + this.id + 'ImgSelected" class="ui-icon ' + $(this).children(":first").data("class") +'">').appendTo(widget);
            }
        })
        .iconselectmenu("menuWidget")
            .addClass("ui-menu-icons customicons");

和相关的css：

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper{
        padding: .5em 0 .5em 3em;
    }

    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon{
        background-image: url("ui-icons-largeicons.png");
        height: 32px;
        width: 32px;
        top: .1em;
    }

编辑：以为我应该为一些图标添加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;}

Answer 1

我在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;
    }

Answer 2

使用selectmenu示例作为OP我提出了以下解决方案：

type  
  TRttiHelp = record
    class function EnumInRange<TEnum>(AValue: Integer) : Boolean; static;
  end;

class function TRttiHelp.EnumInRange<TEnum>(AValue: Integer) : Boolean;
var
  typeData: PTypeData;
begin
  if GetTypeKind(TEnum) <> tkEnumeration then
    raise EInvalidCast.CreateRes(@SInvalidCast);

  typeData := GetTypeData(TypeInfo(TEnum));
  Result := (AValue >= typeData.MinValue) and (AValue <= typeData.MaxValue);
end; 

type
  TMyEnum = (a,b,c); 
begin
  WriteLn(TRttiHelp.EnumInRange<TMyEnum>(2));  // Writes true
end.

和相应的CSS：

$(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("&nbsp;").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");
});

将自定义图标添加到选择菜单

2 个答案: