CODEWITHSUNDEEP
jquery-mobile
Christian
Christian

Reputation: 1697

How can I add Images to jQuery Mobile Select Menu Items

I would like to create a jQuery mobile select menu with images for each option. The basic version is described in the docs. I know there are some jQuery plugins which realize this, but I would like to do it with jQuery mobile only.

Has someone already realized this or has an idea how to achieve it?

Upvotes: 2

Views: 8836

Answers (2)

Alberto Fortes
Alberto Fortes

Reputation: 562

I have a mobile web with this case working (but it's not still available). Try this:

1. Create CSS styles for the images, and give this clause:

CSS:

.eur {background: url(../images/flags/EuropeanUnion.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;}
.usd {background: url(../images/flags/us.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;}
.gbp {background: url(../images/flags/gb.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;}

HTML:

<option value="eur" class="eur" selected="selected">Euro</option>
<option value="usd" class="usd">US Dollar</option>
<option value="gbp" class="gbp">GB Pound</option>

And check the CSS new clauses are working in each option.

2. Understand the DOM:

In your html you have something like this:

<select data-mini="true" class="select-with-images">
  <option value="eur" class="eur" selected="selected">Euro</option>
  <option value="usd" class="usd">US Dollar</option>
  <option value="gbp" class="gbp">GB Pound</option>
</select>

But jQuery Mobile generates this:

<div class="ui-select">
  <div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Euro</span>
      <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
    </span>
    <select class="select-with-images" data-mini="true">
      <option selected="selected" class="eur" value="eur">Euro</option>
      <option class="usd" value="usd">US Dollar</option>
      <option class="gbp" value="gbp">GB Pound</option>
    </select>
  </div>
</div>

3. The jQuery

So you have to get the image class of the selected option and give it to span.ui-btn-tex each time you change the select, and first of all when jQuery Mobile is rendered:

$(document).ready(function() {
  //select-with-images
  $('.select-with-images').on('change', function() {
    var selection = $(this).val();
    $(this).parents('.ui-select').find('.ui-btn-text').attr('class', 'ui-btn-text '+selection);
  });
  $(document).on('mouseover', function() {
    $('.select-with-images').each(function() {
      var selection = $(this).find(':selected').val();
      $(this).parents('.ui-select').find('.ui-btn-text').attr('class', 'ui-btn-text '+selection);
    });
  });
});

That works for me.

Upvotes: 2

naugtur
naugtur

Reputation: 16915

Use an inspector (eg. firebug) to get the idea of how the elements are created and after they're ready add the images to the spans in there. That's the only way to make it work with jquery mobile without modifying JQM itself.

Also - in the fresh release ofjQuery Mobile alpha4 the select is rendered with default browser component by default.

Upvotes: 1

Related Questions