slider를 만드는 것은 jQuery
methods 들을 사용해서 이뤄 집니다.
slider
() method 는 슬라이더를 사용할 수 있도록 하는 jQuery Mobile 에 추가 된 메소드 입니다. 슬라이더는 표준 slider component 와 연계 돼 있습니다.
slider는 <input>
element에 type
attribute 를 "range"로 넣어서 생성합니다. data-role="slider"
or data-type="range"
attributes 들도 사용할 수 있습니다. min
and max
attributes 들은 슬라이더의 최소값과 최대값을 세팅하는 경우에 필수로 들어가야 하는 항목들 입니다.
Dynamic creation of a slider
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Indicate the number of rooms: </span><br />
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<input type=range min=1 max=5 />";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
|
tistory521_01.htmljQuery Mobile 에서 slider 는 축을 따라서 버튼을 움직일 때의 슬라이더 값을 표시하는 input field 와 항상 같이 있다는 점을 유념해 주세요. 이 input field 를 표시하지 않을 수도 있습니다.
이 부분은 다음에 다룰께요.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| slider 를 customizing 하기 (0) | 2012.12.15 |
|---|---|
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |
| Slider 에 값을 할당하거나 받아오기 (0) | 2012.12.13 |
| Ajax 로 slider 삽입하기 (0) | 2012.12.11 |
| HTML element를 jQuery Mobile slider 로 변환하기 (2) | 2012.12.10 |
| switch 관련 예제들 (0) | 2012.12.08 |
| Switch 커스터마이징 하기 (0) | 2012.12.08 |
| switch 에서 이벤트 관리하기 (0) | 2012.12.05 |
| switch 값 할당하거나 retrieve 하기 (0) | 2012.12.05 |
| Ajax로 switch 삽입하기 (1) | 2012.12.04 |