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

Question

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

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

Answer 1

使用检查员（例如，萤火虫）来了解元素是如何创建的，并且在准备好之后将图像添加到那里的跨度。这是让jquery mobile无需修改JQM本身就可以使用的唯一方法。

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

Answer 2

我有一个移动网络与这种情况下工作（但它不可用）。 试试这个：

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的

所以，你必须获得图像类所选选项，它每次改变选择了，首先当jQuery Mobile的渲染时间向span.ui-btn-tex：

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

这对我的作品。