이전에 했던 것 처럼 checkbox를 HTML 코드에 직접 생성해 넣지 않고 Ajax를 통해서 서버로부터 HTML 코드를 받아오는 방법이 있습니다.
Insert checkboxes 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 an apartment: </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>
and <label>
HTML elements를 checkbox (ui-checkbox
class)와 연관이 있는 <div>로 변환하는데 사용합니다. 감싸여진 <div> 에서 controlgroup
() method를 call 하면 그 checkbox들을 그룹화 할 수 있습니다.
action.php file
<?
$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>";
echo utf8_encode ($html);
?>
|
|
|
action13.php
tistory479_01.html
checkboxradio
() 와 controlgroup
() methods 를 calling 하면 create evnet 의 triggering 에 의해 replace 될 수 있다는 것을 잘 봐 두세요. 그래서 아래 코드 대신에
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");
The create event will be received by the document object in jQuery Mobile, and internal treatment of this event searches for HTML elements to transform into jQuery Mobile components. Thus triggering a single create event processes checkboxes and the group that includes them.
create event 는 jQuery Mobile안에 있는 document
object 에 의해 receive 될 겁니다. 그리고 이 이벤트는 HTML element를 jQuery Mobile component로 변환하도록 합니다. 그러니까 single create event를 triggering 하면 checkboxes 와 the group 작업을 수행합니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 체크 박스 생성 예제들 (0) | 2012.11.27 |
|---|---|
| 체크박스 customize 하기 (5) | 2012.11.27 |
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
| checkbox 다이나믹하게 생성하기 (0) | 2012.11.19 |
| selection list 관련 예제들 (0) | 2012.11.18 |
| selectiion list customize 하기 (0) | 2012.11.17 |
| selection list 에서 이벤트 관리하기 (0) | 2012.11.17 |