Garder l'image affichée après le select sur selectMenu

Version imprimable

07/01/2015, 17h08
Pelote2012

Garder l'image affichée après le select sur selectMenu

J'utilise la liste avec image du jqueryui:selectmenu.
Je voudrais que l'image reste après la sélection, mais je n'y arrive pas.
Vous trouverez mon code là :
http://jsfiddle.net/eko23o1w/

Mais je n'y arrive pas.
Merci pour votre aide

J'ai repris le code de la démonstration "Selectmenu with custom avatar".

Le code fonctionne, mais je ne suis pas satisfait. C'est du bricolage, il y a peut-être une meilleure solution.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
h2 {
    margin: 30px 0 0 0
}
fieldset {
    border: 0;
}
label {
    display: block;
}
select {
    width: 200px;
}
option.avatar {
    background-repeat: no-repeat !important;
    padding-left: 20px;
}
.avatar .ui-icon {
    background-position: left top;
}

Code:

1
2
3
4
5
6
7
8
9
<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://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
        <option value="2" 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>
</fieldset>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$( function(){ // forme abrégée de $(document).ready(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 );
        }
    });
 
    $( "#people" )
        .iconselectmenu({
            "select" : function( event, ui ){
                $( "span.ui-selectmenu-text" ).append( $( "span", event.currentTarget ).clone() );
            }
        })
        .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
});

Bonjour,

Je viens de trouver une solution (avec de l'aide sur forum jquery ui)
Je suis dans le cas particulier, où chaque option de mon select et soit un text soit une image.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<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"));
              },
              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>
 
 <select name="people" id="people" class="TFOlstFiltreImg TFOfilter lstfilter">
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);" selected="selected">TOUS</option>
    <option value="" data-style="background-image: url(&apos;/Images/vide.png&apos;);">SANS</option>
    <option value="/Images/imgres.jpg" data-style="background-image: url(&apos;/Images/imgres.jpg&apos;);">&nbsp;</option>
    <option value="/Images/imgres.png" data-style="background-image: url(&apos;/Images/imgres.png&apos;);">&nbsp;</option>
</select>

Dans chaque option, il est important d'avoir soit une image vide et le text
ou l'image et " "

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
.TFOOptlstFiltreImg
{
background-repeat:no-repeat;
background-size: 24px 24px;
width:100px;
}
.ui-widget
{
font-size: 1em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item
{
padding: 0.5em 0 0.5em 2.1em;
background-repeat: no-repeat;
}
 
/*Agrandir sinin 16px par defaut*/
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon
{
    height: 24px;
    width: 24px;
    top: 0.1em;
}

oups, faut ajouter un truc dans le create
Code:

1 2 3 4 5 create: function (event, ui) { var widget = $(this).TFOiconSelectImg("widget"); widget.attr("style", $(this).children(":first").data("style")).addClass("TFOOptlstFiltreImg"); },
J'ai aussi fait une autre solution en partant de l'idée d'ajout d'un span comme proposé ci-dessus : http://stackoverflow.com/questions/2...25934#27925934