Question

我难以置信我无法在某个地方找到这个，但我一直在寻找一段时间而找不到任何东西，所以我觉得这里值得一试。我需要的是：

<select>菜单的功能
“选项”，我可以将元素放入
不是Twitter Bootstrap

这就是全部。我有一个可以选择的已保存项目列表，但我还想在选项中添加一些“x”图标或删除它。

我认为某人已经从<ul>或其他任何东西做过这个，但是如果它在那里我找不到它。我发现的唯一工作示例需要Bootstrap，我不想使用它。我可以自己写这个，但它会很黑，我希望它已经存在，我可以省去麻烦。谢谢！

Answer 1

您可以从jqueryui调整selectmenu。 http://jqueryui.com/selectmenu/#custom_render

我开始了，看看小提琴。

http://jsfiddle.net/htqdmdtd/3/

<强> CODE

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
  <script>
  $(function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>", { 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( li );

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

    $( "#filesA" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );

    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );

    $( "#people" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
  });
  </script>
  <style>
    h2 {
      margin: 30px 0 0 0
    }
    fieldset {
      border: 0;
    }
    label {
      display: block;
    }
    select {
      width: 200px;
    }

    /* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 24px;
      top: 0.1em;
    }
    .ui-icon.video {
      background: url("images/24-video-square.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("images/24-podcast-square.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("images/24-rss-square.png") 0 0 no-repeat;
    }

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

<div class="demo">

<form action="#">

  <h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
  <fieldset>
    <label for="people">Select a Person:</label>
    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://retsmgr.discovermls.com/images/delete-16x16.gif&apos;);">Jane Doe</option>
    </select>
  </fieldset>
</form>

</div>

<强> JS

$('#people-menu').click(function(event){
    if($(event.target).is('span.avatar')) {
        $(event.target).parent('li').hide(); 
    }
});

选择菜单的替代方案

1 个答案: