jQuery Mobile 버튼 아이콘

jQuery Mobile가 제공하는 아이콘 세트는 버튼을 더 매력적으로 만들 수 있습니다.

jQuery Mobile 버튼에 아이콘 추가

버튼에 아이콘을 추가하려면 data-icon 속성을 사용하세요:

<a href="#anylink" data-role="button" data-icon="search">검색</a>

훈련:button 또는 input 요소에서 data-icon 속성을 사용할 수도 있습니다.

아래는 jQuery Mobile가 제공하는 일부 사용 가능 아이콘을 나열했습니다:

속성 값 설명 아이콘 예제
data-icon="arrow-l" 왼쪽 화살표 테스트
data-icon="arrow-r" 오른쪽 화살표 테스트
data-icon="delete" 삭제 테스트
data-icon="info" 정보 테스트
data-icon="home" 홈페이지 테스트
data-icon="back" 뒤로가기 테스트
data-icon="search" 검색 테스트
data-icon="grid" 그리드 테스트

jQuery Mobile 버튼 아이콘에 대한 전체 정보는 다음을 방문하세요: jQuery Mobile 아이콘 참조 매뉴얼。

아이콘 정위치

아이콘의 위치를 정의할 수도 있습니다: 위, 오른쪽, 아래 또는 왼쪽.

위치를 정의하기 위해 data-iconpos 속성을 사용하세요:

아이콘 위치:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">위</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">오른쪽</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">아래</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">왼쪽</a>

직접 테스트해 보세요

훈련:기본적으로 모든 버튼의 아이콘은 왼쪽에 배치됩니다.

아이콘만 표시

아이콘만 표시할 경우 data-iconpos를 "notext"로 설정하십시오:

Back:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">검색</a>

직접 테스트해 보세요