选择下拉列表中的jQuery Mobile缩略图列表 [英] jQuery Mobile Thumbnail list in a Select Drop Down

问题描述

我想知道是否有人在<select>选项列表中实现了缩略图? 可视化:

I am wondering if anyone has implemented thumbnails within a <select> option list? To visualise:

http://jsfiddle.net/sidouglas/Ba4gG/2/

(同时包含选择列表和缩略图列表)

( with both the select and thumbnail list combined )

我知道从技术上讲，您不能在option标签中包含图片，并且当您尝试使用jQuery Mobile时会删除它们.也许是<option data-image="path-to-image">label</option>等上的数据属性.

I know that technically you can't have images within an option tag, and jQuery mobile strips them when you try this. Perhaps a data attribute on an <option data-image="path-to-image">label</option> etc.

有没有人?

推荐答案

使用您对data-image属性的想法:

Using your idea of a data-image attribute:

<div class="ui-field-contain">
    <label for="select-custom-18">Popup List</label>
    <select name="select-custom-18" id="select-custom-18" data-native-menu="false">
        <option value="1" data-image="https://api.jquerymobile.com/resources/listview/images/album-bb.jpg">Broken Bells</option>
        <option value="2" data-image="https://api.jquerymobile.com/resources/listview/images/album-hc.jpg">Warning</option>
        <option value="3" data-image="https://api.jquerymobile.com/resources/listview/images/album-p.jpg">Wolfgang Amadeuys Phoenix</option>
     </select>
</div>

该菜单由jQM实现为弹出窗口，因此请处理afteropen事件后的弹出窗口并将图像注入列表:

The menu is implemented by jQM as a popup, so handle the popup afteropen event and inject the images into the list:

$(document).on("pagecreate", function(){    
    var opts = $("#select-custom-18 option");
    $( "#select-custom-18-listbox-popup" ).on( "popupafteropen", function( event, ui ) {
        $("#select-custom-18-menu li").each(function(index){
            if ($(this).find("img").length == 0){
                var imageURL = opts.eq(index).data("image");
                var imgElem = '<img src=' + imageURL + ' width="32px" height="32px" />';
                $(this).find("a").prepend(imgElem);
            }
        });
    });
});

jQM对弹出窗口使用命名约定:selectid + '-listbox-popup'.弹出窗口中的实际UL名称为selectid + '-menu'.因此，我们遍历列表中的每个LI，看看是否已经注入了图像.如果没有，请从选项列表中找到相应的数据属性，然后创建一个IMG元素以添加到列表项中的定位标记中.

jQM uses a naming convention for the popup: selectid + '-listbox-popup'. The actual UL in the popup is named selectid + '-menu'. So we iterate through each LI in the list and see if we have already injected the image. If not, find the corresponding data attribute from the options list and create an IMG element to add to the anchor tag within the list item.

这里是您更新的 FIDDLE

Here is your updated FIDDLE

注意:我将样式留给您...

这篇关于选择下拉列表中的jQuery Mobile缩略图列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！