JQuery Mobile - 입력란에 체크 상자에 데이터 아이콘 추가

Question

체크 박스 그룹의 일부 Chekbox 레이블에 작은 data-icon="star"을 넣고 싶습니다. 거기에 jQuery data-icon을 사용하여 그렇게 할 수있는 방법이 있나요 아니면 그냥 CSS에서 직접해야합니까 (어떤 경우에는 내가 같은 렌더링을 얻을 수 data-icon 중 하나?). 꿈의 세계에서

, 여기에 작동 할 것입니다 :

<div data-role='fieldcontain' data-mini='true'> 
<fieldset data-role='controlgroup'> 
<input type='checkbox' name='cb1' id='cb1' /> 
<label for='cb1' data-icon='star'>special</label> 
<input type='checkbox' name='cb2' id='cb2' /> 
<label for='cb2'>normal</label> 
</fieldset></div> 

감사합니다 많이 도와

Answer 1

당신은이 작업을 수행하는 사용자 정의 CSS 나 JS를 사용하는 것

, data-icon 유일한 작품 문서 당 a 태그 : 아이콘의이 스타일 스팬으로 입력되기 때문에 http://jquerymobile.com/test/docs/buttons/buttons-icons.html

이는 JQM 확인란이 렌더링 정확히 어떻게되는 훨씬 더 까다 롭습니다 - 둘은를 사용일부 기본 스타일 및 위치 지정.

jqm 스타일링이 다음과 같이 마법을 적용한 후 추가하기 위해 jquery 함수를 사용하려고 시도한 경우 : http://jsfiddle.net/shanabus/zt7cP/1/ - 그러나 스타일링은 실제 체크 박스와 충돌하지만 체크 박스의 기능은 여전히 ​​존재합니다.

희망이 있으면 올바른 방향으로 갈 수 있습니다.

Answer 2

최신 jQuery 모바일 (1.4.5)에서만 사용할 수 있는지 확실하지 않지만 "class"속성을 통해 ui-icon을 추가 할 수 있습니다. 이 예는 다음과 같을 것입니다 그래서 :

<div data-role='fieldcontain' data-mini='true'> 
<fieldset data-role='controlgroup'> 
<input type='checkbox' name='cb1' id='cb1' /> 
<label for='cb1' class='ui-icon-star'>special</label> 
<input type='checkbox' name='cb2' id='cb2' /> 
<label for='cb2'>normal</label> 
</fieldset></div>