본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Flip toggle switches(플립 토글 스위치)

by 대소니 2011. 6. 3.

Binary 타입의 on/off 혹은 true/false 데이터 입력을 위해 모바일 환경에서 보편적으로 사용되는 “flip” switch는 슬라이드처럼 드래그를 하거나 터치를 통해 선택할 수 있습니다.
Flip 스위치를 만들기 위해서는 select 태그에 on과 off의 두 option 태그를 생성하고, label 태그의 for 속성의 값과 select 태그의 id 속성값을 매칭하고, 상위 div 태그로 감싸며 속성으로 data-role=”fieldcontain”을 추가합니다.

<div data-role="fieldcontain">
    <label for="slider">Select slider:</label>
    <select name="slider" id="slider" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>


 
자바스크립트에서 filp switch를 refresh하는 방법은 아래와 같습니다.

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

댓글