slider 는 .<input> input field 와 관련이 있죠. 그래서 slider에 어떤 변화가 오면 input field에 change event가 발생 됩니다.
이것을 확인하기 위해 화면의 <span> element 에 slider 의 값을 display 해 보겠습니다.
Using the slider change events
<!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=100 /><br />
Value : <span id=txt></span> </div>
</div>
</body>
</html>
<script>
$("input").live ("slidercreate", function ()
{
$("input").bind ("change", function (event)
{
$("#txt").text ($(this).val ());
});
});
</script>
|
|
tistory540_01.html여기서 중요한 점은 slider 의 change events 를 살펴보는 것은 그 slider 가 화면에 제대로 생성됐을 때만이 가능하다는 겁니다. 다시말해 오리지널 HTML 코드가 jQuery Mobile 에 의해 완전하게 변화된 이후라야 된다는 거죠. 그래서 우리는 slidercreate event 에서 change
event 를 살펴보도록 코딩을 한 겁니다. 그렇지 않으면 제대로 작동하지 않을 겁니다.
위의 방법과는 다른 방법을 사용할 수도 있습니다. slider 가 생성되 있지 않아도 되는 방법이죠. change event가 발생했을 때 bind
() method 대신에 live
() method를 사용하는 겁니다. 그러면 jQuery Mobile 이 <input>
field 를 생성할 때에도 live
() method 에 의해서 그 변화가 observed 될 수 있습니다. 아래 예제를 보시겠습니다.
Observe the change event on the slider without waiting for its creation
<!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=100 /><br />
Value : <span id=txt></span> </div>
</div>
</body>
</html>
<script>
$("input").live ("change", function (event)
{
$("#txt").text ($(this).val ());
});
</script>
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Ajax 로 accordion menu 삽입하기 (0) | 2012.12.20 |
|---|---|
| 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.13 |
| 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 |