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

jQuery Mobile - Slider(슬라이더)

by 대소니 2011. 6. 2.

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");


댓글