jQuery Mobile(PhoneGap) [jQuery Mobile] Button

황제낙엽 2012.11.15 17:44 조회 수 : 77

sitelink1  
sitelink2  
sitelink3 http://1 


버튼의 종류

a(앵커)

페이지 이동에 사용된다.

1
<a href="index.html" data-role="button">Link button</a>

1
<a href="index.html" data-role="button" data-mini="true">Link button</a>

Form 버튼

Form의 버튼인 <input type="button" /> 이나 <button></button> 등은 data-role를 지정하지 않아도 자동으로 버튼 컴포넌트로 변환된다.

버튼의 아이콘

아이콘의 종류

버튼에 아이콘을 표시하고 싶다면 data-icon 속성을 사용한다.

버튼 아이콘의 위치

data-iconpos 속성의 값을 left, right, top, bottom으로 지정해서 아이콘의 위치를 변경한다. 

아래는 data-iconpos="top"으로 한 예제

참고

http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-icons.html

버튼의 그룹핑

1
2
3
4
5
<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

1
2
3
4
5
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

버튼의 테마

버튼의 테마는 data-theme 속성에 a,b,c,d,e 값을 부여해서 지정한다.

1
<a href="index.html" data-role="button" data-theme="a">Theme a</a>

아래는 각 테마별 버튼의 디자인

이 게시물을
목록
쓰기 태그