jQuery Mobile에 이미지를 추가하는 방법 메뉴 항목 선택

Question

각 옵션에 대한 이미지가 포함 된 jQuery 모바일 선택 메뉴를 만들고 싶습니다. 기본 버전은 docs에 설명되어 있습니다. 이것을 실현하는 몇 가지 jQuery 플러그인이 있다는 것을 알고 있지만 jQuery 모바일 만 사용하고 싶습니다.

누군가 이미이 사실을 알고 있거나 달성 방법을 알고 있습니까?

Answer 1

인스펙터 (예 : 파이어 버그)를 사용하여 요소가 생성 된 방법에 대한 아이디어를 얻고 준비가 완료되면 이미지를 거기의 범위에 추가하십시오. 그것이 JQM 자체를 수정하지 않고도 jquery 모바일에서 작동하도록하는 유일한 방법입니다.

또한 새로운 릴리스의 jQuery Mobile alpha4에서는 기본적으로 select가 기본 브라우저 구성 요소로 렌더링됩니다.

Answer 2

이 케이스가 작동하는 모바일 웹이 있습니다 (단, 아직 사용할 수는 없습니다). 이미지에 대한를 CSS 스타일을 만들기

1.이 절 포기 :이 시도

CSS :

.eur {background: url(../images/flags/EuropeanUnion.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;} 
.usd {background: url(../images/flags/us.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;} 
.gbp {background: url(../images/flags/gb.png) 5px 50% no-repeat; padding: 3px 0 3px 35px; font-size: 16px;} 

HTML :

<option value="eur" class="eur" selected="selected">Euro</option> 
<option value="usd" class="usd">US Dollar</option> 
<option value="gbp" class="gbp">GB Pound</option> 

을 그리고 CSS를 확인 새로운 옵션이 각 옵션에서 작동합니다. 이 같은이 당신의 HTML에서

:

2. DOM을 이해

<select data-mini="true" class="select-with-images"> 
    <option value="eur" class="eur" selected="selected">Euro</option> 
    <option value="usd" class="usd">US Dollar</option> 
    <option value="gbp" class="gbp">GB Pound</option> 
</select> 

를하지만, jQuery를 모바일이 생성

<div class="ui-select"> 
    <div data-theme="c" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text">Euro</span> 
     <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span> 
    </span> 
    <select class="select-with-images" data-mini="true"> 
     <option selected="selected" class="eur" value="eur">Euro</option> 
     <option class="usd" value="usd">US Dollar</option> 
     <option class="gbp" value="gbp">GB Pound</option> 
    </select> 
    </div> 
</div> 

3. jQuery를

나를 위해 작동

$(document).ready(function() { 
    //select-with-images 
    $('.select-with-images').on('change', function() { 
    var selection = $(this).val(); 
    $(this).parents('.ui-select').find('.ui-btn-text').attr('class', 'ui-btn-text '+selection); 
    }); 
    $(document).on('mouseover', function() { 
    $('.select-with-images').each(function() { 
     var selection = $(this).find(':selected').val(); 
     $(this).parents('.ui-select').find('.ui-btn-text').attr('class', 'ui-btn-text '+selection); 
    }); 
    }); 
}); 

:3210

그래서 당신이 선택한 옵션의 이미지 클래스를 얻을 span.ui-btn-tex에 jQuery를 모바일가 렌더링 될 때 당신이 선택하고, 우선을 변경할 때마다 그것을 제공해야합니다.