Discussion :

[Pelote2012]

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

[danielhagnoul]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Pelote2012]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Pelote2012]

oups, faut ajouter un truc dans le create

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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