jquery mobile demo - Button widget(버튼 위젯)

jquery mobile demo - Button widget(버튼 위젯)

버튼 사용하기 예제

<form>

<input type="button" value="Button">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

- 강조형(Enhanced)

<form>

<div class="ui-input-btn ui-btn ui-corner-all ui-shadow">

Input Value

<input type="button" data-enhanced="true" value="Input value">

</div>

</form>

- 모서리 라운드주기(Corners)

<form>

<input type="button" value="기본형버튼">

<input type="button" value="라운드제거버튼" data-corners="false">

<div class="ui-input-btn ui-btn ui-corner-all">

Input Value

<input type="button" data-enhanced="true" value="강조형">

</div>

</form>

- 아이콘만 나오게 하기

<form>

<input type="button" data-icon="delete" data-iconpos="notext" value="아이콘만표시">

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

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">

강조 - 아이콘만표시

<input type="button" data-enhanced="true" value="강조 - 아이콘만 표시">

</div>

</div>

</form>

- 그림자 옵션(Shadow)

<form>

<input type="button" value="기본형버튼">

<input type="button" value="그림자제거버튼" data-shadow="false">

<div class="ui-input-btn ui-btn ui-shadow-all">

강조형

<input type="button" data-enhanced="true" value="강조형">

</div>

</form>

- 한줄에 표시(Inline)

<form>

<input type="button" value="input" data-inline="true">

<div class="ui-input-btn ui-btn ui-btn-inline">

강조형

<input type="button" data-enhanced="true" value="강조형">

</div>

</form>

- 작은폰트(mini)

<form>

<input type="button" value="input" data-mini="true">

<div class="ui-input-btn ui-btn ui-mini">

강조형

<input type="button" data-enhanced="true" value="강조형">

</div>

</form>

- 아이콘과 함께(Icon)

<form>

<input type="button" value="input" data-icon="delete">

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left">

강조형

<input type="button" data-enhanced="true" value="강조형">

</div>

</form>

- 아이콘 위치 설정(Icon position)

<form>

<input type="button" value="input" data-icon="왼쪽(기본)">

<input type="button" value="input" data-icon="오른쪽" data-iconpos="right">

<input type="button" value="input" data-icon="위" data-iconpos="top">

<input type="button" value="input" data-icon="아래" data-iconpos="bottom">

<input type="button" value="input" data-icon="아이콘만" data-iconpos="notext">

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-left">

강조형-왼쪽

<input type="button" data-enhanced="true" value="강조형-왼쪽">

</div>

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-right">

강조형-오른쪽

<input type="button" data-enhanced="true" value="강조형-오른쪽">

</div>

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-top">

강조형-위

<input type="button" data-enhanced="true" value="강조형-위">

</div>

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-bottom">

강조형-아래

<input type="button" data-enhanced="true" value="강조형-아래">

</div>

<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext">

강조형-아이콘만

<input type="button" data-enhanced="true" value="강조형-아이콘만">

</div>

</form>

- 사용불가(Disabled)

<form>

<input type="button" value="사용불가" disabled="">

<div class="ui-input-btn ui-btn ui-state-disabled">

강조형

<input type="button" data-enhanced="true" value="강조형" disabled="">

</div>

</form>