■ JQuery Mobile에서 기본적으로 제공되는 button icon의 종류를 알아보고 몇 가지만 예제에 삽입하고 아이콘의 위치도 조절해보겠습니다. 먼저 기본 제공되는 버튼의 종류는 다음과 같습니다.
▲ 좀 많네요. ^^ 이 중에서 몇 개만 버튼에 삽입해보겠습니다.
▲ 버튼에 아이콘을 넣는 형식은 예제처럼 data-icon="아이콘 이름"을 넣어주면 됩니다. 임의대로 몇 개만 넣어봤는데요. 브라우저에서 출력해보겠습니다.
▲ 이렇게 간단하게 버튼의 특성에 맞게 아이콘을 삽입할 수 있는데요. 기본은 이렇게 문자열의 왼쪽에 위치하지만 이 위치도 바꿔줄 수 있습니다.
data-iconpos 속성을 이용하는데요. 속성값에 left(기본값), right, top, bottom, notext 를 설정할 수 있습니다. 역시 하나씩 적용해보겠습니다.
▲ 기본값(left)은 제외하고 나머지 속성값을 적용해봤는데요. 브라우저에서 출력해서 확인해보고 마무리하겠습니다.
▲ 그림처럼 아이콘의 위치를 오른쪽, 위, 아래 등으로 바꿔줄 수 있고요. notext 속성은 문자열은 출력하지 않고, 아이콘만 나타나도록 하는 속성입니다.
이렇게 해서 jquery mobile에서 제공하는 버튼 아이콘에 대해서 알아봤습니다. 수고하셨어요.
