使用 jQuery UI 的 Selectmenu 保存图片答案

【问题标题】：Keep picture with Selectmenu of jQuery UI使用 jQuery UI 的 Selectmenu 保存图片
【发布时间】：2015-01-07 10:53:21
【问题描述】：

我使用 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

【问题讨论】：

你记得把$( "<li>", { text: item.label } )改成$( "<li>", { html: item.element.html() } )吗？
是的。我更新我的问题
实际上，通过您的设置，您根本不需要我之前的评论。您的 span 应该有一个 background-image，但很可能浏览器会看到它没有内容并以宽度和高度 0 呈现它，因此您还应该适当地手动调整大小。如果没有工作示例，我无法提供更多细节（小提琴？）

标签： javascript jquery-ui select

【解决方案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;
    }

【讨论】：

【解决方案2】：

我在选择项目时为保持图标添加了一些更新。完美运行。

$(function () {
                $.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");
                        }
                        $("<i>", {
                            style: item.element.attr("data-style"),
                            "class": "bl-icon " + item.element.attr("data-class")
                        })
                            .appendTo(wrapper);
                        return li.append(wrapper).appendTo(ul);
                    }
                });

                $("#IconDropdown").iconselectmenu({
                    create: function (event, ui) {
                        var widget = $(this).iconselectmenu("widget");
                        $span = $('<i id="' + this.id + 'selected" class="avatar-selected"> ').html("&nbsp;").appendTo(widget);
                        $("#" + this.id + 'selected').attr("class", $("#IconDropdown option:selected")[0].getAttribute('data-class'));
                    },
                    change: function (event, ui) {
                        $("#" + this.id + 'selected').attr("class", ui.item.element[0].getAttribute('data-class'));
                    }
                }).iconselectmenu("menuWidget").addClass("ui-menu-icons");
            });

【讨论】：

【解决方案3】：

此解决方案运行正常在这里，我只有文字或图片。永远不要同时发生。

<script type="text/javascript">
    $(function () {
        $.widget("custom.TFOiconSelectImg", $.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")
          .TFOiconSelectImg({
              create: function (event, ui) {
                  var widget = $(this).TFOiconSelectImg("widget");
                  widget.attr("style", $(this).children(":first").data("style")).addClass("TFOOptlstFiltreImg");
              },
              change: function (event, ui) {
                  $(this).TFOiconSelectImg("widget").attr("style", ui.item.element.data("style")).addClass("TFOOptlstFiltreImg")
                  //$("span.ui-selectmenu-text").append($("span", event.currentTarget).clone());
                  //alert($(this).val());
              }
          }).TFOiconSelectImg("menuWidget").addClass("ui-menu-icons customicons");
    });
</script>

在每个选项中，重要的是要有空白的图片和文字或图片和“ ”

 <select name="people" id="people" class="TFOlstFiltreImg TFOfilter lstfilter">
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);" selected="selected">TOUS</option>
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);">SANS</option>
    <option value="/Images/imgres.jpg" data-style="background-image: url(&apos;/Images/imgres.jpg&apos;);">&nbsp;</option>
    <option value="/Images/imgres.png" data-style="background-image: url(&apos;/Images/imgres.png&apos;);">&nbsp;</option>
</select>

.TFOOptlstFiltreImg
{
background-repeat:no-repeat;
background-size: 24px 24px;
width:100px;
}
.ui-widget
{
font-size: 1em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item
{
padding: 0.5em 0 0.5em 2.1em;
background-repeat: no-repeat;
}

/*Agrandir sinin 16px par defaut*/
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon
{
    height: 24px;
    width: 24px;
    top: 0.1em;
}

此解决方案存在问题，有时可以修改跨度菜单按钮的 css。然后在其他帖子中更好地使用方法，并添加一个对象

【讨论】：

【解决方案4】：

这里还有另一个解决方案：

<script type="text/javascript">
    $(function () {
        $.widget("custom.TFOiconSelectImg", $.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")
          .TFOiconSelectImg({
              create: function (event, ui) {
                  var widget = $(this).TFOiconSelectImg("widget");
                  $span = $('<span id="' + this.id + 'ImgSelected" class="TFOSizeImgSelected"> ').html("&nbsp;").appendTo(widget);
                  $span.attr("style", $(this).children(":first").data("style"));
              },
              change: function (event, ui) {
                  $("#" + this.id + 'ImgSelected').attr("style", ui.item.element.data("style"));
              }
          }).TFOiconSelectImg("menuWidget").addClass("ui-menu-icons customicons");
    });
</script>


<select name="people" id="people" class="TFOlstFiltreImg">
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);" selected="selected">TOUS</option>
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);">SANS</option>
    <option value="/Images/imgres.jpg" data-style="background-image: url(&apos;/Images/imgres.jpg&apos;);">&nbsp;</option>
    <option value="/Images/imgres.png" data-style="background-image: url(&apos;/Images/imgres.png&apos;);">&nbsp;</option>
</select>

以及相关的 CSS

.ui-widget
{
font-size: 1em;
}

.ui-widget-content
{
border-style: none;
}

/*Affichage des options*/
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item
{
padding: 0.5em 0 0.5em 2.1em;
background-repeat: no-repeat;
}

/*Agrandir sinon 16px par defaut*/
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon
{
    height: 24px;
    width: 24px;
    top: 0.1em;
}

.TFOlstFiltreImg
{
width: 100px;
}

.TFOSizeImgSelected
{
position:absolute;
height: 24px;
width: 24px;
left:35%;
right:auto;
margin-top:-12px; /* 24/2*/
top:50%;
background-size:24px 24px;
background-repeat:no-repeat;
}

.TFOOptlstFiltreImg
{
background-size:24px 24px;
background-repeat:no-repeat;
}

这里还有另一个示例。不用加跨度，只加一张图片

$("#people")
          .TFOiconSelectImg({
              create: function (event, ui) {
                  var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last");
                  $span = $('<img class="TFOSizeImgSelected TFOOptlstFiltreImg"> ').appendTo($SpanTxt);
                  $span.attr("style", $(this).children(":first").data("style"));
              },
              change: function (event, ui) {
                  var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last");
                  $span = $('<img class="TFOSizeImgSelected TFOOptlstFiltreImg"> ').appendTo($SpanTxt);
                  $span.attr("style", ui.item.element.data("style"));
                  //$("#" + this.id + 'ImgSelected').attr("style", ui.item.element.data("style"));
              }
          }).TFOiconSelectImg("menuWidget").addClass("ui-menu-icons customicons");

用

修改css

.TFOSizeImgSelected
{
position:absolute;
height: 24px;
width: 24px;
left:2em;
}

.TFOOptlstFiltreImg
{
background-size:24px 24px;
background-repeat:no-repeat;
}

【讨论】：