jquery mobile demo - Buttons(버튼)

jquery mobile demo - Buttons(버튼)

jQuery mobile에서는 버튼의 스타일을 다양하게 설정할 수 있다. 기본적으로 사용방법은 data-role="button"으로 사용할 수 있으나 간단하게 클래스 적용으로도 가능하다.

<a href="#" class="ui-btn">링크</a>

<button class="ui-btn">버튼</button>

버튼 옵션 

- 테두리에 라운드주기

<a href="#" class="ui-btn ui-corner-all"></a>

<button class="ui-btn ui-corner-all">버튼</button>

* 버튼에 텍스트없이 아이콘만 주고싶은 경우에는 아래와 같이 사용한다.

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>

<div id="custom-border-radius">

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>

</div>

- 버튼에 그림자효과 주기

<a href="#" class="ui-btn ui-shadow">링크</a>

<button class="ui-btn ui-shadow">버튼</button>

- 버튼 한줄에 나열하기

<a href="#" class="ui-btn ui-btn-inline">링크</a>

<button class="ui-btn ui-btn-inline">버튼</button>

- 버튼텍스트 작게쓰기

<a href="#" class="ui-btn ui-mini">링크</a>

<button class="ui-btn ui-mini">버튼</button>

- 버튼에 아이콘 추가하기

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">링크</a>

<button class="ui-btn ui-icon-delete ui-btn-icon-left">버튼</button>

- 버튼에 사용되는 아이콘 위치설정하기

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">왼쪽</a>

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">오른쪽</a>

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">위</a>

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">아래</a>

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">아이콘만보이기</a>

- 버튼한줄에 나열하기(아이콘포함)

<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left">왼쪽</a>

<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right">오른쪽</a>

<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top">위</a>

<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-bottom">아래</a>

<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">아이콘만보이기</a>

- 버튼 아이콘에 그림자효과주기

<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">링크</a>

<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">버튼</button>

- 클릭불가 버튼

<a href="#" class="ui-btn ui-state-disabled">링크</a>

<button disabled="">버튼</button>

- 기본버튼 

<button data-role="none">버튼</button>