圖標定製jQuery Mobile的選擇菜單

我使用一個自定義菜單中選擇從jQuery Mobile的，我想要把圖標放到自定義彈出菜單陪伴每個option。我申請了data-icon屬性爲每個option，就像這樣：圖標定製jQuery Mobile的選擇菜單

<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，我已經驗證了我的自定義圖標中選擇按鈕本身的工作。我是否完全錯誤期待圖標出現在自定義菜單中？

來源

2012-04-23 FMM

這是默認不支持，但這裏是一個快速的代碼，使之成爲可能：

//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-23 21:40:35 Jasper

這是什麼樣的，我害怕.. 。功能請求表格在哪裏？ =） – FMM 2012-04-23 21:45:27

這是一個非常小的插件，'336字節縮小'。 – Jasper 2012-04-23 21:52:42

是的，它很小，但它並不包含所有的基礎：例如'data-iconpos'。也不會在動態內容中處理調用'selectmenu（）'或觸發'create'。不是我期望從一個SO回答，但你得到我的漂移，我敢肯定=） – FMM 2012-04-23 22:11:29

圖標定製jQuery Mobile的選擇菜單

回答

相關問題