Checkboxes 는 jQuery Mobile에 의해 <input>
element에 type="checkbox"
attribute 가 삽입되어서 만들어 집니다. jQuery 의 standard 메소드들이 사용될 수 있고 jQuery Mobile 에 의해 추가된
checkboxradio
() method도 사용될 수 있습니다.
checkboxes 는 checkboxradio standard component 와 연결돼 있습니다.
<input> element 의 id attribute 와 연결된 for attribute 를 가지고 있어야 합니다.
같은 set 내에 checkboxes들을 그룹화 하려면 data-role="controlgroup"
attribute 를 <div>
element 에 넣으시면 됩니다.
Creating dynamic 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>
</div>
</body>
</html>
<script>
var html = "";
html += "<div data-role=controlgroup>";
html += "<label for=id1> 1 bedroom </label>";
html += "<input type=checkbox id=id1 name=p1 />";
html += "<label for=id2> 2 bedrooms </label>";
html += "<input type=checkbox id=id2 name=p2 />";
html += "<label for=id3> 3 bedrooms </label>";
html += "<input type=checkbox id=id3 name=p3 />";
html += "<label for=id4> 4 bedrooms </label>";
html += "<input type=checkbox id=id4 name=p4 />";
html += "<label for=id5> 5 bedrooms </label>";
html += "<input type=checkbox id=id5 name=p5 />";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
tistory477_01.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
|---|---|
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
| selection list 관련 예제들 (0) | 2012.11.18 |
| selectiion list customize 하기 (0) | 2012.11.17 |
| selection list 에서 이벤트 관리하기 (0) | 2012.11.17 |
| selection list 추가하기와 지우기 (0) | 2012.11.15 |
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |