반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

slider 의 이벤트 관리하기

2012. 12. 14. 11:56 | Posted by 솔웅


Manage events on sliders




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>



tistory540_02.html


반응형

Comment