Place icon in a SelectMenu of Jquery UI

Question

Place icon in a SelectMenu of Jquery UI

Navigation

#1 by (2 votes)

5

I would like to place an icon in the selected item of a SelectMenu item.

Like this way. I have managed to add the icons in the drop-down, but I can not put it there.

The code I used is this:

<div class="select-lang">
        <?
            $check = $sql->query("SELECT * FROM '".PREFIX."langs' WHERE 'active' = '1' ORDER BY 'int_name' ASC");
            echo "<select class='languages'>";
            while($show = $check->fetch_object()){
                echo "<option value='".$show->lang."' data-class='".$show->lang."' data-title='".$show->int_name."'>".$show->name."</option>";
            }
            echo "</select>";
        ?>
    </div>

At first I generate the whole structure with what I have stored in the database. Now with Jquery UI the following:

<script type="text/javascript">
        $(document).ready(function(){
            $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                _renderItem: function( ul, item ) {
                var li = $( "<li>", { text: item.label, "title": item.element.attr( "data-title" ) } );

                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 );
                }
            });
            $('.languages')
            .iconselectmenu()
            .iconselectmenu('menuWidget')
            .addClass('ui-menu-icons customicons');
        });
    </script>

Well, this is the doubt. Greetings.

javascript jquery

asked by El Tito Barte 25.01.2016 в 14:03

source

1 answer

Show the selected data of a select in a textarea Ruby on rails 4: Render and / or redirect called multiple times in action. using Devise

score 2 · Accepted Answer

If you look at the generated HTML code, you can see that the icon is defined by the background image of the span specified in this part of your JS code:

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

That span will have the class "ui-icon" and also the class specified in data-class of option in the selection menu. So, to change the icon, you just have to specify a new icon in CSS. In your case, assuming that $show->lang is "is", it would be something like this:

span.ui-icon.es { 
    background-image: url(http://enlace.a.bandera.de/españa.jpg);
}

Then for the case of the selected option, you can follow a similar method but for the class "ui-selectmenu-text". So just missing a bit of JavaScript to update the class "ui-selectmenu-text" when you click on an option and when the page is loaded (so that the default option also has an icon without pressing anything). / p>

Here is an example:

$(document).ready(function(){
  $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function( ul, item ) {
      var li = $( "<li>", { text: item.label, "title": item.element.attr( "data-title" ) } );

      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 );
    }
  });
  $('.languages')
  .iconselectmenu()
  .iconselectmenu('menuWidget')
  .addClass('ui-menu-icons customicons');
  
  // cambiar la clase de la opción seleccionada cuando se pulsa en una de las opciones en la lista
  $("body").on("click",".ui-menu li.ui-menu-item", function() {
      var target = $(this).closest(".ui-menu").attr("aria-labelledby");
      var tclass = $(this).find("span").attr("class").replace("ui-icon ", "");
      $("#" + target).find(".ui-selectmenu-text").attr("class", "ui-selectmenu-text " + tclass);
  });
  
  // activar la bandera al principio
  $(".ui-selectmenu-button").each(function() {
      var tclass = $("#" + $(this).attr("id").replace("-button", "") + " option").first().attr("data-class");
      $(this).find(".ui-selectmenu-text").addClass(tclass);
  });
 
  
});

.ui-selectmenu-button {
  width:200px !important;
}

.ui-selectmenu-text { 
  padding-left:40px !important;
  background-position: 13px center;
  background-repeat:no-repeat;
}


span.ui-icon.en,
.ui-selectmenu-text.en { 
  background-image: url( http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/flag-england-icon.png) !important;
}

span.ui-icon.es,
.ui-selectmenu-text.es { 
  background-image: url( http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/flag-spain-icon.png);
}

span.ui-icon.fr,
.ui-selectmenu-text.fr { 
  background-image: url( http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/flag-france-icon.png);
}

span.ui-icon.de,
.ui-selectmenu-text.de { 
  background-image: url( http://icons.iconarchive.com/icons/fatcow/farm-fresh/16/flag-germany-icon.png);
}

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

<select class="languages">
  <option value="de" data-class="de" data-title="Alemán">Alemán</option>
  <option value="es" data-class="es" data-title="Español">Español</option>
  <option value="fr" data-class="fr" data-title="Francés">Francés</option>
  <option value="en" data-class="en" data-title="Inglés">Inglés</option>
</select>