jQuery Mobile에서 radio button을 다루는 것은 체크박스를 다루는 것과 아주 비슷합니다. Radio button은 <input>
element에 type="radio"
attribute를 넣어서 사용합니다. jQuery Mobile 에 의해 추가된 checkboxradio
() method 는 radio button을 manage 합니다. radio button은 checkboxradio
standard component 를 사용합니다.
<input>
element에 type="radio"
attribute 를 넣으면 radio 버튼이 생성됩니다. 여기서 name
attribute 는 반드시 들어가야 할 항목 입니다. 이
name
attributes 가 같아야지 하나의 그룹으로 묶을 수 있습니다. 이 <input>
element 에는 radio 버튼에 대한 text를 가지고 있는 <label>
element 가 필요하고 그 <label>
element 안에는 for
attribute 가 있어서 고유의 id
attribute 를 정해 줍니다.
이 single set 로 된 그룹 radio 버튼들은 <div>
element 안에 있고 그 <div>
element 에는 data-role="controlgroup"
attribute 가 있습니다.
Creating dynamic 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>
</div>
</body>
</html>
<script>
var html = "";
html += "<div data-role=controlgroup>";
html += "<label for=id1> 1 </label>";
html += "<input type=radio id=id1 name=rooms />";
html += "<label for=id2> 2 </label>";
html += "<input type=radio id=id2 name=rooms />";
html += "<label for=id3> 3 </label>";
html += "<input type=radio id=id3 name=rooms />";
html += "<label for=id4> 4 </label>";
html += "<input type=radio id=id4 name=rooms />";
html += "<label for=id5> 5 </label>";
html += "<input type=radio id=id5 name=rooms />";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
tistory490_01.html
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |
|---|---|
| 기존 리스트에 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 |
| 체크 박스 생성 예제들 (0) | 2012.11.27 |
| 체크박스 customize 하기 (5) | 2012.11.27 |
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |