본문 바로가기
프로그램/jQuery Mobile

24. flip toggle 양식

by 로드러너 2013. 12. 28.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Index

22. select 양식

23. checkbox, radio 버튼 양식

24. flip toggle 양식

25. mobileinit 이벤트

26. 페이지 로드 이벤트

 

 

플립 토글(Flip Toggle)은 한쪽으로 밀어서 선택하도록 하는 UI이다. 주로 on/off 와 같이 둘 중 하나를 선택하는 경우에 사용될 수 있다. jQuery Mobile은 <select>태그에 data-role="slider" 속성을 추가해서 플립 토글 버튼을 만든다. 단, 이때 <option>은 두개만 지정해야 한다.

 

<div data-role="fieldcontain">

    <label for="onoff">On/Off :</label>

    <select id="onoff" name="onoff" data-role="slider">

        <option value="off">OFF</option>

        <option value="on" selected>ON</option>

    </select>

</div>

 

 

 

<select data-role="slider">에 사용할 수 있는 data-* 속성

data-* 속성

설명

data-theme

체크박스 테마

swatch letter (a-z)

data-track-theme

트랙 테마 (off 테마)

swatch letter (a-z)

 

 

 

[영어회화] Hang in there. 좀 견디어 봐요

'프로그램 > jQuery Mobile' 카테고리의 다른 글

26. 페이지 로드 이벤트  (0) 2013.12.30
25. mobileinit 이벤트  (0) 2013.12.29
23. checkbox, radio 버튼 양식  (0) 2013.12.27
22. select 양식  (0) 2013.12.26
21. range 양식, slider  (0) 2013.12.25