Slider already present in the HTML code
slider는 <input>
element와 연관이 있죠. 이것을 이용하면 간단하게 slide 바가 만들어 집니다. 축위에 버튼이 놓여질 위치를 정하기 위해서 val
(value) method를 사용할 겁니다. 그리고 slider의 값을 얻기위해 val
() 메소드를 사용할 거구요.
Assign and retrieve the value of the 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 />
<input type=range min=1 max=5 />
</div>
</div>
</body>
</html>
<script>
$("input").live ("slidercreate", function (event)
{
$("input").val (3);
$("input").slider ("refresh");
alert ($("input").val ());
});
</script>
|
|
tistory536_01.html
이 코드에 대해서는 약간의 설명이 필요한데요. val
(value)를 하게 되면 cursor 의 값에 영향을 미치게 됩니다. 사실은 이 메소드는 단지 그 slider 의 <input>
input field 에 영향을 미치는 겁니다.slider 그 자체에 영향을 미치는 것은 아닙니다 그래서 slider
("refresh")를 실행해 줘야 하는 겁니다. 이 구문은 slider 가 생성되기 전에는 실행할 수 없기 때문에 slidercreate
event를 사용하는 겁니다.
initial <input>
element는 두개의 element들로 변환된다는 사실도 기억해 두세요. 하나는 <input>
input field와 관계가 있고 그리고 또 하나는 slider 에 관계 된 ui-slider
class를 가지고 있는 <div>
element 입니다.
original <input>
element (HTML 코드에 있는) 는 jQuery Mobile 에 의해서 없어지고 이 두개의 새로운 element 가 대체될 겁니다. 그렇기 때문에 반드시 bind
()가 아니라 live
() method를 사용해야 합니다. 그래야 jQuery Mobile 에 의해 생성된 새 <input>
element가 slidercreate event를 receive 할 수 있습니다.
또한 그 버튼을 축의 어느 한 지점에 위치하도록 할 수도 있습니다.
Slider dynamically created
이것을 위해서는 위에서 사용했던 val
(value) 와 val
() methods 들을 여전히 사용합니다. 그리고 slider 의 버튼을 display 하기 위해 slider
("refresh") method를 사용해서 refresh 해야 합니다.
Assign and retrieve the value of the 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);
$("input").live ("slidercreate", function (event)
{
$("input").val (3);
$("input").slider ("refresh");
alert ($("input").val ());
});
</script>
|
|
권영길 경남 도지사 후보 공식 싸이트 |
이전 예제에서와 같은 이유로 live () instruction을 사용해서 slidercreate event를 통해 화면에 slider 가 생성되기를 기다립니다.
slider 를 생성할 때 이 코드를 이미 포함하고 있도록 만들려면 자바스크립트 코드를 약간 사용해야 합니다. 이 때는 slider
() instruction 을 사용합니다.
Assign and retrieve the value of the slider, creating the slider by slider () method
<!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>
$("#home").bind ("pagecreate", function (event)
{
var html = "";
html += "<input min=1 max=5 />";
$("#home div:jqmData(role=content)").append (html);
$("input").slider ();
$("input").val (3);
$("input").slider ("refresh");
alert ($("input").val ());
});
</script>
|
|
이수호 서울시 교육감 후보 홍보 동영상 |
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| HTML을 jQuery Mobile 의 accordion menu 로 변환하기 (1) | 2012.12.18 |
|---|---|
| 다이나믹 하게 accordion menu 생성하기 (0) | 2012.12.17 |
| slider 생성 관련 예제들.. (0) | 2012.12.15 |
| slider 를 customizing 하기 (0) | 2012.12.15 |
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |
| Ajax 로 slider 삽입하기 (0) | 2012.12.11 |
| HTML element를 jQuery Mobile slider 로 변환하기 (2) | 2012.12.10 |
| 다이나믹하게 slider 생성하기 (0) | 2012.12.09 |
| switch 관련 예제들 (0) | 2012.12.08 |
| Switch 커스터마이징 하기 (0) | 2012.12.08 |