버튼

data-role="button" 로 사용한다.

data-enhanced="true" (기본값은 "false")를 이용하면 DOM요소와 속성을 이미 처리된 것으로 인식하여 요소와 속성을 생성하지 않는다.

 

data-corners="false"  // 코너 직각으로

data-iconpos="top"   //아이콘 위치

data-iconpos="bottom"

data-iconpos="left"

data-iconpos="right"

  

data-icon="home"  //아이콘종류

data-theme="a" //테마선택

data-iconshadow="true" //그림자넣기

data-inline="true"  //텍스트크기맞춤

disabled  // 비활성화

 

<div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>버튼</h1>
        </div>
        <div role="main" class="ui-content">
            <a data-role="button">기본 a </a>
            <button>기본 button </button>
            <input type="button" value="기본 input">
            <button data-role="button" data-enhanced="true">Enhanced</button>
            <input type="button" data-enhanced="true" value="Enhanced">
            <button data-role="button" data-corners="false">코너 false </button>
            <input type="button" data-corners="false" value="코너 false">
            <button data-role="button" data-icon="home" data-iconpos="top">아이콘</button>
            <input type="button" data-icon="home" data-iconpos="bottom" value="아이콘">
            <button data-role="button" data-icon="home" data-iconpos="left">아이콘</button>
            <input type="button" data-icon="home" data-iconpos="right" value="아이콘">
            <div class="ui-input-btn ui-btn ui-icon-home ui-btn-icon-notext">
            </div>
            <button data-role="button" data-shadow="false">그림자</button>
            <input type="button" data-shadow="true" value="그림자">
            <button data-role="button" data-inline="true">인라인</button>
            <input type="button" data-inline="true" value="인라인">
            <button data-role="button" data-theme="a">테마A</button>
            <input type="button" data-theme="b" value="테마B">
            <button data-role="button" data-icon="home" data-theme="b" data-iconshadow="true">아이콘그림자</button>
            <input type="button" data-icon="home" data-theme="b" data-iconshadow="false" value="아이콘그림자">           
           
            <button data-role="button" data-mini="true">작게</button>
            <input type="button" data-mini="true"value="작게">
            <button data-role="button" disabled="">사용불가</button>
            <input type="button" disabled="" value="사용불가">
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>위젯사용하기</h4>
        </div>
    </div>

</div>