jQuery를 모바일은 버튼을 더 바람직한 보이게 아이콘의 세트를 제공합니다.
jQuery를 모바일 버튼에 아이콘 추가
사용하여 버튼에 아이콘을 추가하려면 ui-icon 클래스 및 아이콘 위치 클래스와 아이콘 위치 (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
참고 : 다른 버튼의 경우, 목록보기 및 형태의 버튼처럼, 당신은 데이터 아이콘 속성을 사용해야합니다. 이것은 나중에 장에서 설명한다.
아래 우리는 jQuery를 모바일에서 제공하는 몇 가지 가능한 아이콘을 나열했습니다 :
| 아이콘 클래스 | 기술 | 상 | 예 |
|---|---|---|---|
| ui-icon-arrow-l | 왼쪽 화살표 | 시도 해봐 | |
| ui-icon-arrow-r | 오른쪽 화살표 | 시도 해봐 | |
| ui-icon-info | 정보 | 시도 해봐 | |
| ui-icon-delete | 지우다 | 시도 해봐 | |
| ui-icon-back | 뒤로 | 시도 해봐 | |
| ui-icon-audio | 스피커 | 시도 해봐 | |
| ui-icon-lock | 맹꽁이 자물쇠 | 시도 해봐 | |
| ui-icon-search | 수색 | 시도 해봐 | |
| ui-icon-alert | 경보 | 시도 해봐 | |
| ui-icon-grid | 그리드 | 시도 해봐 | |
| ui-icon-home | 집 | 시도 해봐 |
모든 jQuery를 모바일 단추 아이콘의 완전한 참고로, 우리로 이동하시기 바랍니다 jQuery를 모바일 아이콘 참조 .
위치 아이콘
: 당신은 아이콘이 버튼에 위치 할 위치에 대한 네 개의 값 중 하나를 지정할 수 있습니다 top, right, bottom 또는 left .
사용 ui-btn-icon 위치를 지정 클래스를 :
링크 버튼에 대한 아이콘 위치
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
»그것을 자신을 시도 당신이 링크 버튼의 아이콘 위치를 지정하지 않으면 아이콘이 표시되지 않습니다.
아이콘 만 표시
만 사용하여 아이콘을 표시하려면 "notext" 아이콘 위치에 대한 값으로 :
서클 제거
기본적으로 모든 아이콘 주위에 회색 원 (디스크)이 있습니다. 원을 제거하려면 추가 "ui-nodisc-icon" 요소 또는 컨테이너에 클래스를 :
예
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
»그것을 자신을 시도 블랙 또는 화이트 아이콘
기본적으로 모든 아이콘은 흰색입니다. 검정에있는 아이콘의 색상을 변경하려면 추가 "ui-alt-icon" 요소 또는 컨테이너를 :
예
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
»그것을 자신을 시도 더 예
추가 "ui-nodisc-icon" 컨테이너에 클래스를
의 예 "ui-nodisc-icon" 클래스는 컨테이너에 추가.
추가 "ui-alt-icon" 컨테이너에 클래스를
의 예 "ui-alt-icon" 클래스는 컨테이너에 추가.