Question

我想创建一个jQuery移动选择菜单，其中包含每个选项的图像。基本版本在docs中描述。我知道有一些jQuery插件可以实现这一点，但我想只使用jQuery mobile。

有人已经意识到这一点，或者有想法如何实现它？

Answer 1

我有一个移动网络，这个案例有效（但它仍然无法使用）。试试这个：

<强> 1。为图像创建CSS样式，并提供以下子句：

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>

并检查CSS新条款是否适用于每个选项。

<强> 2。了解DOM：

在你的HTML中你有这样的东西：

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

但是jQuery Mobile会产生这个：

<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。 jQuery

所以你必须得到所选选项的图像类，并在每次更改选择时将其提供给span.ui-btn-tex，首先渲染jQuery Mobile时：

$(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);
    });
  });
});

这适合我。

Answer 2

使用检查器（例如，firebug）来了解元素的创建方式，并在它们准备好后将图像添加到那里的跨度中。这是使用jquery mobile而不修改JQM本身的唯一方法。

此外 - 在jQuery Mobile alpha4的最新版本中，默认情况下使用默认浏览器组件呈现选择。

如何将图像添加到jQuery Mobile选择菜单项

2 个答案: