如何將圖像添加到jQuery Mobile選擇菜單項目

我想創建一個jQuery手機選擇菜單，其中包含每個選項的圖像。基本版本在docs中描述。我知道有一些jQuery插件可以實現這一點，但我只想用jQuery手機做。如何將圖像添加到jQuery Mobile選擇菜單項目

有人已經意識到這一點或有一個想法如何實現它？

來源

2011-04-01 Christian

使用檢查員（例如，螢火蟲）來了解元素是如何創建的，並且在準備好之後將圖像添加到那裏的跨度。這是讓jquery mobile無需修改JQM本身就可以使用的唯一方法。

另外 - 在jQuery Mobile alpha4的新版本中，默認情況下，選擇是使用默認瀏覽器組件呈現的。

來源

2011-04-01 13:15:33 naugtur

感謝您的建議，但我只是將其從選擇菜單更改爲對話框。這很容易。 – Christian 2011-04-04 08:41:41

我有一個移動網絡與這種情況下工作（但它不可用）。試試這個：

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

這對我的作品。

來源

2012-04-03 10:30:59

我試過這個但不適合我。你可以給 http://jsfiddle.net的例子嗎？ – Miuranga 2013-04-01 08:12:24

有趣的方法。其中一個原因是不工作的原因是因爲dom準備失蹤，所以關閉}）; （修復它）另一個原因（在IE中）是因爲IE不支持console.log（），除非開發人員工具（F12）是打開的。在JS中刪除該行將有所幫助。代碼中還存在一個錯誤（固定）。我也更喜歡使用.addClass（選擇）;而不是鼠標懸停偵聽器中的.attr（'class'，'ui-btn-text'+ selection）。我無法複製你的具體背景圖片，但這裏有一個工作小提琴給你（或稍後來，像我一樣）http://jsfiddle.net/ARZQw/11/ – Strixy 2013-05-10 17:42:10

這是另一個使用data-native-menu =「false」選項。 http://jsfiddle.net/Strixy/gKbDw/ – Strixy 2013-05-10 22:50:22

如何將圖像添加到jQuery Mobile選擇菜單項目

回答

相關問題