jQuery Mobile은 radio 버튼에 대해 change event를 observe 할 수 있습니다. 이 이벤트는 레이디오 버튼을 클릭할 때마다 발생합니다. 그 레이디오 버튼이 selected 상태든지 아니든지 모두 발생하죠. click event도 있지만 이전에도 언급했듯이 직접적으로 사용되지는 않습니다.
Using the change event on radio buttons
<!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> Choose the number of rooms: </span>
<div data-role=controlgroup>
<label for=id1> 1 </label>
<input type=radio id=id1 name=rooms />
<label for=id2> 2 </label>
<input type=radio id=id2 name=rooms />
<label for=id3> 3 </label>
<input type=radio id=id3 name=rooms />
<label for=id4> 4 </label>
<input type=radio id=id4 name=rooms />
<label for=id5> 5 </label>
<input type=radio id=id5 name=rooms />
</div>
</div>
</div>
</body>
</html>
<script>
$(":radio").bind ("change", function (event)
{
alert ($(this).attr ("checked"));
});
</script>
tistory497_01.html
왜 click event 가 직접적인 방법으로 사용되지 않을까요. jQuery Mobile이 원래의 HTML 코드를 변환시킨다는 것을 기억해 보세요. 그러니까 그 click event를 받는 것은 <div>
element내의 ui-radio
CSS class 가 됩니다. 소스에 원래 있던 <input>
element 가 아니죠. 그래서 <input>
element에 있는
<div>
element를 클릭하면 이 <div>
element가 change event를 만들게 되는 것입니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Ajax로 switch 삽입하기 (1) | 2012.12.04 |
|---|---|
| HTML 을 jQuery Mobile switch로 바꾸기 (0) | 2012.12.04 |
| 다이나믹 하게 switch 만들기 (0) | 2012.12.04 |
| Radio 버튼 생성 예제들... (0) | 2012.12.03 |
| radio 버튼 커스터마이징 하기 (0) | 2012.12.02 |
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |
| Ajax 로 radio 버튼 insert 하기 (1) | 2012.11.28 |
| jQuery Mobile radio button 으로 HTML element 바꾸기 (1) | 2012.11.28 |
| 다이나믹하게 radio button 생성하기 (0) | 2012.11.28 |