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'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 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 |
| switch 값 할당하거나 retrieve 하기 (0) | 2012.12.05 |
| Ajax로 switch 삽입하기 (1) | 2012.12.04 |
| HTML 을 jQuery Mobile switch로 바꾸기 (0) | 2012.12.04 |
| 다이나믹 하게 switch 만들기 (0) | 2012.12.04 |
| Radio 버튼 생성 예제들... (0) | 2012.12.03 |