JQueryUI添加一个图片到选项中

Question

首先，我尝试寻找一个能够在选项中呈现图像的jquery选择菜单插件。我找到了这样一个插件，但它很久没有更新了，我担心它不再受支持。因此，我正在尝试开发自己的插件。

所以我正在创建一个JQuery UI选择菜单，并希望在选项中添加一个图像。

然后，我构建了我的选择菜单，并为每个选项添加了图像src数据作为附加属性。在加载jquery UI选择菜单后，我想设置这些图像。

我在服务器上进行呈现。

<select id="CarId2" name="CarId2">
    <option value="volvo" data-imagesrc="~/Plugins/Cars/Content/Images/volvo.png">Volvo</option>
    <option value="bmw" data-imagesrc="~/Plugins/Cars/Content/Images/bmw.png">BMV</option>
</select>

在加载时，我尝试读取jqueryui选择菜单的选项并更新项目内容，但是...我甚至无法加载选项。

$(document).ready(function () {
  $("#CarId2").selectmenu();
  var options = $("#CarId2").selectmenu("option");

  for (item in options)
  {
    console.log(item);
  }
});

能有人帮我学习如何加载ui选择菜单的选项并更新它的内容吗？

- Boris Todorov

Answer 1

查看selectmenu自定义渲染，你可以像这样做：

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

      $( "<span>", {
        style: item.element.attr( "data-style" ),
        "class": "ui-icon " + item.element.attr( "data-class" )
      }).appendTo( wrapper );

      return li.append( wrapper ).appendTo( ul );
    }
  });

  $("#CarId2")
  .iconselectmenu()
  .iconselectmenu( "menuWidget")
  .addClass( "ui-menu-icons avatar" );
});

/* select with CSS avatar icons */
option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}
.avatar .ui-icon {
  background-position: left top;
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<select name="CarId2" id="CarId2">
    <option value="volvo" data-class="avatar" 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="bmw" data-class="avatar" 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-class="avatar" 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>

- gaetanoM

Answer 2

你可以使用 selectmenu 小部件的 _renderItem 方法。
该函数负责渲染选择菜单中的元素，并使您能够按照自己的方式创建项目。

.selectmenu({
    ...
    _renderItem: function( ul, item ) {
        // Create the list item
        var li = $('<li>')
        // Create the image
        var img = $('<img>')
            .attr('src', $(item.element).data('imagesrc'))

        // append the img to the list item
        img.appendTo(li)

        // append the list item to the menu and return the item
        return li.appendTo( ul );
    }
    ...
})

- Dekel