3

私は jQuery Mobile のカスタム選択メニューを使用しています。カスタム ポップアップ メニューにアイコンを配置して、それぞれに付随させたいと考えていますoption。次のように、data-icon属性を eachに適用しています。option

<select name='mySelect' id='mySelect' data-icon='gear'>
    <option value='0' data-icon='star'>Option 0</option>
    <option value='1' data-icon='star'>Option 1</option>
    <option value='2' data-icon='star' selected="selected">Option 2</option>
</select>

FWIW、カスタム アイコンが選択ボタン自体で機能することを確認済みです。カスタムメニューにアイコンが表示されることを期待するのは完全に間違っていますか?

4

1 に答える 1

4

これはデフォルトではサポートされていませんが、これを可能にする簡単なコードを次に示します。

//wait for the correct page to initialize
$(document).delegate('#home', 'pageinit', function () {

    //loop through each of the SELECT elements in this page
    $.each($(this).find('select'), function () {

        //get the ID of this select because it's menu's ID is based off of it
        var currentID = this.id;

        //iterate through each of the OPTION elements for this SELECT element
        $.each($(this).find('option'), function (index, element) {

            //if the OPTION element has the `data-icon` attribute
            if ($(element).attr('data-icon') != undefined) {

                //update the menu for this SELECT by adding an icon SPAN element
                //to each of the OPTION elements that has a `data-icon` attribute
                $('#' + currentID + '-menu').children().eq(index).find('.ui-btn-inner').append('<span class="ui-icon ui-icon-' + $(element).attr('data-icon') + ' ui-icon-shadow" />');
            }
        });
    });
});​​

ここにデモがあります：http://jsfiddle.net/NHQGD/

于 2012-04-23T21:40:35.883 に答える