Javascript 使用jQuery UI的Selectmenu保留图片_Javascript_Jquery Ui_Select

Javascript 使用jQuery UI的Selectmenu保留图片

javascript jquery-ui select

Javascript 使用jQuery UI的Selectmenu保留图片,javascript,jquery-ui,select,Javascript,Jquery Ui,Select,我使用jqueryui-Select菜单构建一个带有图片的列表。我跟着，这很好。但是，当您选择一个项目时，复制的只是文本，而不是图片。我解释为什么我想要这张照片。我有一个没有文本的列表，只有图片，然后当你选择一个项目时，你会看到一个空白的范围。。。有人有主意吗这是我的密码 <script type="text/javascript"> $(function () { $.widget("custom.iconselectmenu", $.ui.sel

我使用jqueryui-Select菜单构建一个带有图片的列表。我跟着，这很好。但是，当您选择一个项目时，复制的只是文本，而不是图片。我解释为什么我想要这张照片。我有一个没有文本的列表，只有图片，然后当你选择一个项目时，你会看到一个空白的范围。。。有人有主意吗

这是我的密码

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


$（函数（）{
$.widget（“custom.iconselectmenu”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
var li=$（“”，{html:item.element.html（）}）；
var attr=item.element.attr（“数据样式”）；
if（typeof attr！==typeof undefined&&attr！==false）{
$("", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标TFOOptlstFiltreImg”
}).附件（李）；
}
返回li.附录（ul）；
}
});
$（“人”）
.iconselectmenu（）.iconselectmenu（“menuWidget”）.addClass（“ui菜单图标”）；
});
选择
{
宽度：200px；
}
作者
陶伦磨坊
无名氏

此解决方案运行正常在这里，我只在项目文本或图片。永远不要两者同时出现

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


$（函数（）{
$.widget（“custom.TFOiconSelectImg”，$.ui.selectmenu{
_renderItem：功能（ul，项目）{
var li=$（“”，{html:item.element.html（）}）；
var attr=item.element.attr（“数据样式”）；
if（typeof attr！==typeof undefined&&attr！==false）{
$("", {
样式：item.element.attr（“数据样式”），
“类”：“ui图标TFOOptlstFiltreImg”
}).附件（李）；
}
返回li.附录（ul）；
}
});
$（“人”）
.TFOiconSelectImg({
创建：函数（事件、用户界面）{
var widget=$（this）.TFOiconSelectImg（“widget”）；
widget.attr（“style”，$（this）.children（“：first”）.data（“style”））.addClass（“TFOOptlstFiltreImg”）；
},
更改：功能（事件、用户界面）{
$（this）.TFOiconSelectImg（“widget”）.attr（“style”，ui.item.element.data（“style”））.addClass（“TFOOptlstFiltreImg”）
//$（$span.ui selectmenu text”）.append（$（$，event.currentTarget.clone（））；
//警报（$（this.val（））；
}
}).TFOiconSelectImg（“菜单Widget”）.addClass（“ui菜单图标自定义图标”）；
});

在每个选项中，必须有空图片和文本或图片和“

图斯桑 .TFOOptlstFiltreImg { 背景重复：无重复；背景尺寸：24px 24px；宽度：100px； } .ui小部件 { 字号：1em； } .ui选择菜单菜单。ui-menu.customicons.ui菜单项 { 填充物：0.5em 0.5em 2.1em；背景重复：无重复； } /* Agrandir sinin 16px PAR DavaT/* .ui选择菜单菜单。ui-menu.customicons.ui菜单项。ui图标 { 高度：24px；宽度：24px；顶部：0.1米； }
这个解决方案的问题是，有时可以修改span菜单按钮的css。然后最好使用其他帖子中的方法，并添加一个对象
此解决方案运行正常在这里，我只在项目文本或图片。永远不要两者同时出现

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

$（函数（）{ $.widget（“custom.TFOiconSelectImg”，$.ui.selectmenu{ _renderItem：功能（ul，项目）{ var li=$（“
”，{html:item.element.html（）}）； var attr=item.element.attr（“数据样式”）； if（typeof attr！==typeof undefined&&attr！==false）{ $("", { 样式：item.element.attr（“数据样式”）， “类”：“ui图标TFOOptlstFiltreImg” }).附件（李）； } 返回li.附录（ul）； } }); $（“人”） .TFOiconSelectImg({ 创建：函数（事件、用户界面）{ var widget=$（this）.TFOiconSelectImg（“widget”）； widget.attr（“style”，$（this）.children（“：first”）.data（“style”））.addClass（“TFOOptlstFiltreImg”）； }, 更改：功能（事件、用户界面）{ $（this）.TFOiconSelectImg（“widget”）.attr（“style”，ui.item.element.data（“style”））.addClass（“TFOOptlstFiltreImg”） //$（$span.ui selectmenu text”）.append（$（$，event.currentTarget.clone（））； //警报（$（this.val（））； } }).TFOiconSelectImg（“菜单Widget”）.addClass（“ui菜单图标自定义图标”）； });
在每个选项中，必须有空图片和文本或图片和“

图斯桑 .TFOOptlstFiltreImg { 背景重复：无重复；背景尺寸：24px 24px；宽度：100px； } .ui小部件 { 字号：1em； } .ui选择菜单菜单。ui-menu.customicons.ui菜单项 { 填充物：0.5em 0.5em 2.1em；背景重复：无重复； } /* Agrandir sinin 16px PAR DavaT/* .ui选择菜单菜单。ui-menu.customicons.ui菜单项。ui图标 { 高度：24px；宽度：24px；顶部：0.1米； }

这个解决方案的问题是，有时可以修改span菜单按钮的css。然后最好在其他帖子中使用方法，添加一个对象，这里是另一个解决方案：

<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(" ").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('/Images/vide.png');" selected="selected">TOUS</option> <option value="" data-style="background-image: url('/Images/vide.png');">SANS</option> <option value="/Images/imgres.jpg" data-style="background-image: url('/Images/imgres.jpg');"> </option> <option value="/Images/imgres.png" data-style="background-image: url('/Images/imgres.png');"> </option> </select>

$(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"); });
这是另一个样本。不要添加跨度，只需添加图片即可

$("#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");

还有另一个解决方案：

<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(" ").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('/Images/vide.png');" selected="selected">TOUS</option> <option value="" data-style="background-image: url('/Images/vide.png');">SANS</option> <option value="/Images/imgres.jpg" data-style="background-image: url('/Images/imgres.jpg');"> </option> <option value="/Images/imgres.png" data-style="background-image: url('/Images/imgres.png');"> </option> </select>

$(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"); });
这是另一个样本。不要添加跨度，只需添加图片即可

$("#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");
使用JQuery UI示例，我提出了以下解决方案：

<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(" ").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('/Images/vide.png');" selected="selected">TOUS</option> <option value="" data-style="background-image: url('/Images/vide.png');">SANS</option> <option value="/Images/imgres.jpg" data-style="background-image: url('/Images/imgres.jpg');"> </option> <option value="/Images/imgres.png" data-style="background-image: url('/Images/imgres.png');"> </option> </select>

$(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"); });
使用JQuery UI示例，我提出了以下解决方案：

<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(" ").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('/Images/vide.png');" selected="selected">TOUS</option> <option value="" data-style="background-image: url('/Images/vide.png');">SANS</option> <option value="/Images/imgres.jpg" data-style="background-image: url('/Images/imgres.jpg');"> </option> <option value="/Images/imgres.png" data-style="background-image: url('/Images/imgres.png');"> </option> </select>

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

我在选中该项目时为保留图标添加了一些更新。工作完美。

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

$（函数（）{ $.widget（“custom.iconselectmenu”，$.ui.selectmen