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

21. range 양식, slider

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

Index

19. jQuery Mobile 폼 양식

20. HTML5 에서 추가된 폼 양식

21. range 양식, slider

22. select 양식

23. checkbox, radio 버튼 양식

 

 

슬라이더는 볼륨 조절 장치처럼 좌우로 조절할 수 있는 UI이다. jQuery Mobile 은 range 양식을 슬라이더로 만들어 준다.

 

 

슬라이더의 min 속성은 최소값, max 속성은 최대값을 지정한다. 슬라이더 조절바의 색상은 date-theme="e" 속성 값을 조정해서, 트랙 색상은 data-track-theme="b" 속성을 조정해서 변경할 수 있다.

 

<div data-role="fieldcontain">

    <label for="amount">Range :</label>

    <input id="amount" type="range" name="amount" min="0" max="100" value="50" data-theme="e" data-track-theme="b" />

</div>

 

 

 

 

 

[영어회화] Keep an eye on this, will you? 이것좀 봐줘여, 그럴래요?

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

23. checkbox, radio 버튼 양식  (0) 2013.12.27
22. select 양식  (0) 2013.12.26
20. HTML5 에서 추가된 폼 양식  (0) 2013.12.23
19. jQuery Mobile 폼 양식  (0) 2013.12.22
18. 터치 이벤트  (0) 2013.12.21