jQuery 모바일 버튼 아이콘
jQuery Mobile은 버튼을 더욱 보기 좋게 만드는 아이콘 세트를 제공합니다.
jQuery Mobile 버튼에 아이콘 추가
ui-icon 클래스를 사용하여 버튼에 아이콘을 추가할 수 있고, 지정된 클래스를 사용하여 버튼 위치를 설정할 수 있습니다.
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
참고: 목록이나 양식의 버튼과 같은 다른 방식의 버튼에서는 data-icon 속성을 사용해야 합니다. 다음 장에서 자세히 소개하겠습니다.
아래에는 jQuery Mobile에서 제공하는 사용 가능한 아이콘 중 일부가 나열되어 있습니다.
| Button 클래스 | Description | Button | Instance | |
|---|---|---|---|---|
| ui-icon-arrow-l | 왼쪽 화살표 |  | 试 시도 ||
| R | 오른쪽 화살표 |  | ||
| Ui-IC on-INFO | 정보  | |||
 | ||||
| ui-icon-delete | Delete | ~ ~ |||
| 사용해 보세요 |  ui-icon-alert | Warning | ||
| -Ui-ICON-GRID | 그리드를 사용해 보세요 모든 jQuery Mobile 버튼 아이콘에 대한 전체 참조 매뉴얼을 보려면 jQuery Mobile 아이콘 참조 매뉴얼을 방문하세요. 위치 아이콘버튼에서 아이콘의 위치를 위쪽, 오른쪽, 아래쪽, 왼쪽으로 지정할 수도 있습니다. ui-btn-icon 속성을 사용하여 위치를 지정하세요: 아이콘 위치:Instance<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a> 인스턴스 실행» 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
아이콘만 표시아이콘만 표시하려면 "notext"를 사용할 수 있습니다: Instance<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">搜索</a> 인스턴스 실행» "인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스 보기 원 제거기본적으로 모든 아이콘에는 회색 원이 있습니다. 필요하지 않은 경우 요소에서 "ui-nodisc-icon" 클래스를 사용할 수 있습니다. Instance<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">使用圆圈 (默认)</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a> Run Instance» 온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 예시 Black, White 버튼기본적으로 모든 아이콘은 흰색입니다. 아이콘 색상을 검정색으로 변경해야 하는 경우 요소에 "ui-alt-icon"을 추가할 수 있습니다. Instance<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">白色</a> <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">黑色</a> Run Instance» "Run Instance" 버튼을 클릭하면 온라인 인스턴스 더 많은 인스턴스가 컨테이너에 추가되었습니다.
"ui-nodisc-icon" 클래스 컨테이너에 추가
"ui-alt-icon" 클래스 |
