radio button을 삽입하거나 지우기 위해서 jQuery 의 standard method 를 사용합니다.
Insertion and removal of 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>
var html = "";
html += "<label for=id0> Studio </label>";
html += "<input type=radio id=id0 name=rooms />";
$("input#id1").after (html);
$("input#id1, label[for=id1]").remove ();
</script>
|
|
tistory495_01.html
이 방법이 항상 통하는 건 아닙니다. 이 예제에서는 제대로 작동합니다. 왜냐하면 radio 버튼이 삽입되고 지워질때 jQuery Mobile 에 의해 HTML 이 변환되지 않아서 그렇습니다. 즉 그 때 JQM 에 의해서 HTML 이 변환되면 제대로 작동 안한다는 거죠. 그럴 땐 다른 방법을 사용해야 합니다.
Insertion and removal of radio buttons in a window already created
<!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>
$("#id1").bind ("checkboxradiocreate", function (event)
{
var html = "";
html += "<label for=id0> Studio </label>";
html += "<input type=radio id=id0 name=rooms />";
$(this).parent ("div.ui-radio").after (html); // insertion
$(this).parent ("div.ui-radio").remove (); // suppression
$("#id0").checkboxradio ();
$("div:jqmData(role=controlgroup)").controlgroup ();
});
</script>
|
|
첫번째 radio button 을 manipulate 하기 위해서 checkboxradiocreate event 에 의해 생성되는 과정을 기다려야 합니다. HTML 코드는 jQuery Mobile 에 의해 변환 됐습니다. 이 radio 버튼은 이제 ui-radio
CSS class 가 있는 <div>
element 로 그룹화 해야 합니다. radio button 을 삽입하려면 checkboxradio
() method 를 사용해야 합니다. 그리고 그룹화를 위해서
<div>
element에 controlgroup
() method 를 사용하는 것도 필요하구요.
새로운 radio button 을 생성하기 위해 create event 를 사용할 수도 있습니다. 이것을 사용하고 난 다음엔 display 된 element들을 refresh 해야 됩니다.
Using standard methods on the components (first way)
$("#id0").checkboxradio
();
$("div:jqmData(role=controlgroup)").controlgroup
();
이전 예제에서 윗 부분을 주석 처리하고 아래 코드를 넣어보세요.
Use the create event on the window (2nd way)
$("#home").trigger ("create");
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 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.12.01 |
| 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 |
| 체크 박스 생성 예제들 (0) | 2012.11.27 |