0

各色がアイテムの横にある小さな四角形になっている色のドロップダウンを作成しようとしています。

もつ：

ここに画像の説明を入力

したい（おおまかに）：

ここに画像の説明を入力

このバージョン (jsfiddle)は、ドロップダウン アイテム自体に対しては正常に機能しますが、ボタンの横に色付きの四角形が表示されるようにボタンも更新したいと思います。

$.widget("custom.coloriconselectmenu", $.ui.selectmenu, {  
  _renderItem: function (ul, item) {  
    var li = $("<li>", {text: item.label});  
    var bgColorStyle = 'background-color:' + item.element.attr("data-color");  
    var fullStyle = "float: left; width: 21px; height: 19px; margin-right: 7px;" + bgColorStyle;  
    $("<div>", {style: fullStyle}).appendTo(li);  
    return li.appendTo(ul);  
  }
});  

$("#selectId").coloriconselectmenu({icons: {button: "custom-button"}});

値の更新時にドロップダウン ボタンを変更して、ドロップダウンのように色の正方形を含める良い方法はありますか?

4

1 に答える 1

2

changeイベントに応答するように、コードを次のように変更します。

$( "#selectId" ).coloriconselectmenu({ 
    icons: { button: "custom-button" }, 
    change: function(event, ui){ 
        var selectedColor = $(this).find("option:selected").attr("data-color");
        //alert(selectedColor);
        var hiddenSelectMenuBtn = "#" + $(this).attr("id")+"-button .ui-selectmenu-text"
        //alert($(hiddenSelectMenuBtn).text());

        var fullStyle = "float: left; width: 21px; height: 19px; margin-right: 7px; background-color:" + selectedColor;  
        $("<span>", {style: fullStyle}).prependTo($(hiddenSelectMenuBtn));  
});

関数またはプロパティを介して簡単に公開されない「選択メニュー テキスト」を選択する必要があります。

これは、更新された jsfiddleで実際に確認できます。

于 2015-04-09T03:34:04.130 に答える