checkbox 추가하고 제거하는데 jQuery 의 standard methods 를 사용합니다.
Insertion and removal of checkboxes
<!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 an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<label for=id0> Studio </label>";
html += "<input type=checkbox id=id0 name=p0 />";
$("input#id1").after (html);
$("input#id1, label[for=id1]").remove ();
</script>
|
|
|
tistory485_01.html
위와 같이 만들었는데요. 이게 항상 제대로 작동한다는 보장은 없습니다. 여기서는 제대로 작동될 겁니다. 왜냐하면 여기서는 check box가 추가되고 제거될 떄 jQuery Mobile 에 의해서 HTML이 변환되지 않았으니까요. HTML 이 jQuery Mobile 에 의해 변환 될 때가 있을 겁니다. 이럴 때는 다른 방법을 사용해야 이 방법을 구현할 수 있습니다.
Insertion and removal of checkboxes 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 an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
</div>
</div>
</body>
</html>
<script>
$("#id1").bind ("checkboxradiocreate", function (event)
{
var html = "";
html += "<label for=id0> Studio </label>";
html += "<input type=checkbox id=id0 name=p0 />";
$(this).parent ("div.ui-checkbox").after (html); // insertion
$(this).parent ("div.ui-checkbox").remove (); // suppression
$("#id0").checkboxradio ();
$("div:jqmData(role=controlgroup)").controlgroup ();
});
</script>
|
|
새 체크박스를 생성하기위해 controlgroup
() method를 사용할 수도 있습니다. 그리고 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' 카테고리의 다른 글
| jQuery Mobile radio button 으로 HTML element 바꾸기 (1) | 2012.11.28 |
|---|---|
| 다이나믹하게 radio button 생성하기 (0) | 2012.11.28 |
| 체크 박스 생성 예제들 (0) | 2012.11.27 |
| 체크박스 customize 하기 (5) | 2012.11.27 |
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
| checkbox 다이나믹하게 생성하기 (0) | 2012.11.19 |
| selection list 관련 예제들 (0) | 2012.11.18 |