이전 글에서 처럼 Radio 버튼을 HTML 코드로 곧바로 생성하는 것 대신에 Ajax를 통해서 서버로부터 HTML 코드를 받는 방법도 있습니다.
Insert radio buttons by Ajax
<!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>
$.ajax (
{
url : "action.php",
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
$("input").checkboxradio ();
$("input").closest ("div:jqmData(role=controlgroup)").controlgroup ();
}
});
</script>
checkboxradio
() 와 controlgroup
() methods를 잘 보세요. checkboxradio
() method 는 <input> 과 <label>
elements 들을 jQuery Mobile 의 radio button 형식인 radio button (class ui-radio) 이 적용되는 <div>
element 로 HTML 코드를 바꿔 줍니다. wrapping <div>
element에서 controlgroup
() method 를 call 한 것은 single visual set 로 radio 버튼을 그룹화 할 수 있도록 합니다.
action.php file
<?
$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>";
echo utf8_encode ($html);
?>
|
|
|
action16.php
tistory492_01.htmlcheckboxradio
() 와 controlgroup
() method 를 call 하는 대신에
create event를 triggering 함으로서 이 기능을 대신 할 수도 있습니다.
Using standard methods of the components (first way)
$("input").checkboxradio ();
$("input").closest
("div:jqmData(role=controlgroup)").controlgroup ();
그래서 위 코드 대신에 아래 코드를 넣어도 똑 같습니다.
Using the create event on the window (2nd way)
$("#home").trigger ("create");
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Radio 버튼 생성 예제들... (0) | 2012.12.03 |
|---|---|
| radio 버튼 커스터마이징 하기 (0) | 2012.12.02 |
| Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |
| 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 |