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

최근에 받은 트랙백

글 보관함


Manage events on switches




change event는 switch 의 값이 바뀌면 이에 대해 알려줄 수 있도록 하는 기능이 있습니다. 이 이벤트는 스위치가 클릭 됐을 때 일어납니다. switch 의 왼쪽을 클릭했는지 오른쪽을 클릭했는지 상관없change event가 일어납니다.

주의 : jQuery Mobile 의 버전에 따라 switch 에 한번 클릭했는데 두번 change events 가 발생 할 수도 있습니다. switch 의 어느 부분을 클릭했느냐에 따라 다른데요. 이 문제를 해결하시려면 아래 예제를 잘 봐 주세요.


Retrieve the new value of the switch when clicked


alert ($("select").val ());


아래 예제는 change event 를 사용해서 switch 를 클릭했을 때 이것을 어떻게 처리할지에 대한 예제 파일입니다. switch를 클릭할 때마다 그 값이 아래에 출력됩니다.


Manage the change event of a switch


<!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> Would you like an apartment: </span>

    <select data-role=slider>

      <option value=no> No </option>

      <option value=yes> Yes </option>

    </select>

    <div id=txt></div>

  </div>

</div>


</body>

</html>


<script>


$("select").bind ("change", function (event)

{

  $("#txt").append ($(this).val () + ", ");

});


</script>






tistory506_03.html




반응형

Comment