javascript - 使用 jQuery UI 的 Selectmenu 保留图片

Question

我使用 jquery UI - 选择菜单来构建带图片的列表。我关注this link这很好。但是当你选择一个项目时，只是复制文本，而不是图片。我解释为什么我想要图片。我有一个没有文本，只有图片的列表，然后当您选择一个项目时，您会看到一个空的范围......有人有想法吗？

这是我的代码

<script type="text/javascript">
    $(function () {
        $.widget("custom.iconselectmenu", $.ui.selectmenu, {
            _renderItem: function (ul, item) {
                var li = $("<li>", { html: item.element.html() });
                var attr = item.element.attr("data-style");
                if (typeof attr !== typeof undefined && attr !== false) {
                    $("<span>", {
                        style: item.element.attr("data-style"),
                        "class": "ui-icon TFOOptlstFiltreImg"
                    }).appendTo(li);
                }
                return li.appendTo(ul);
            }
        });

        $("#people")
          .iconselectmenu().iconselectmenu("menuWidget").addClass("ui-menu-icons");
    });
</script>
<style type="text/css">
    select
    {
        width: 200px;
    }
</style>
<select name="people" id="people">
    <option value="1" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
    <option value="2" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
    <option value="3" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
</select>

fiddle demo here

Answer 1

使用 JQuery UI 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("&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");
});

以及相应的CSS:

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