使用jQuery UI的Selectmenu保持图片 [英] Keep picture with Selectmenu of jQuery UI

问题描述

我使用jquery UI-选择菜单"以建立带有图片的列表. 我点击了此链接，它很好. 但是，当您选择一个项目时，仅文本在复制，而不是图片在复制. 我解释为什么我要照片.我有一个列表，没有文本，只有图片，然后当您选择一个项目时，您会看到一个空的跨度... 有人有主意吗?

I use jquery UI - Select Menu to build a List with picture. I follow this link and it's good. But When you select an item, just the text is copying, not the picture. I explain why I want picture. I've a List with no text, just picture, then When you choose an item, you see an empty span ... Someone have an idea?

这里是我的代码

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

在此处显示小提琴演示

推荐答案

使用JQuery UI 选择菜单我提出了以下解决方案的示例:

Using JQuery UI selectmenu examples i came up with the following solution:

$(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;
    }

这篇关于使用jQuery UI的Selectmenu保持图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！