jQuery Mobile Thumbnail list in a Select Drop Down

问题

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 )

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.

Any takers?

回答1:

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>

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

Here is your updated FIDDLE

NOTE: I am leaving the styling to you...

来源：https://stackoverflow.com/questions/22289188/jquery-mobile-thumbnail-list-in-a-select-drop-down

标签

jquery

jquery-mobile