Slider 위젯을 사용하기 위해서는 input태그에 새롭게 추가된 type=”rage” 속성을 사용합니다.
현재 값을 나타내는 value 속성과 최소값인 min 속성, 최대값인 max속성을으로 슬라이더를 설정합니다. 슬라이더를 드래그하면 현재 값이 업데이트 되고, 폼을 submit시에 현재 값이 전송됩니다.
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
slider는 키보드의 shortcut키를 통해서도 값을 변경할 수 있는데, 현재 값보다 증가시키고자 할 경우에는 방향키 오른쪽 이나 윗쪽 키, page up키를 사용하여 할 수 있고, 현재 값보다 감소시키고자 할 경우에는 방향기 아래쪽 키나 왼쪽 키, page down키를 사용합니다. 최소값이나 최대값으로 이동시킬 때는 home키나 end 키를 사용할 수 있습니다.
Refreshing a slider
만약, 자바스크립트를 통해 제어하거나 변경한 후 다시 보여지게 하고자 할 때는 refresh method를 호출해야 합니다.
$("input[type=range]").val(60).slider("refresh");
'----- IT ----- > jQuery Moblie' 카테고리의 다른 글
jQuery Mobile - Radio buttons(라디오버튼) (0) | 2011.06.07 |
---|---|
jQuery Mobile - Flip toggle switches(플립 토글 스위치) (0) | 2011.06.03 |
jQuery Mobile - Text inputs(텍스트) (0) | 2011.05.31 |
jQuery Mobile - Form Elements samples (0) | 2011.05.30 |
jQuery Mobile - Form basics (1) | 2011.05.27 |
댓글