Question

我想知道是否有人在<select>选项列表中实施了缩略图？想象：

（同时包含选择和缩略图列表）

我知道从技术上讲，你不能在option标签内放置图像，而jQuery mobile会在你尝试时删除它们。也许是<option data-image="path-to-image">label</option>等的数据属性

任何参赛者？

Answer 1

使用您对数据图像属性的想法：

<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实现为弹出窗口，因此处理弹出后的事件并将图像注入列表：

$(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元素以添加到列表项中的锚标记。

以下是您更新的 FIDDLE

注意：我将造型留给你......

选择下拉列表中的jQuery Mobile缩略图列表

1 个答案: