Ajax call로 컴포넌트를 insert 하면 훨씬 다양하게 사용될 수 있습니다. 이렇게 Ajax 를 call 하는 두가지 방법을 알아보겠습니다. 컴포너트의 creation method를 정의하는 방법과 create event를 사용하는 방법 이렇게 두가지 입니다. 둘 다 결과는 같게 나옵니다.
Using the creation method of the component
myplugin
() method를 사용하는 것은 Ajax로 myplugin component를 생성하는 첫번째 방법입니다. 컴포넌트의 creation method에는 컴포넌트와 같은 이름을 사용합니다. 그리니까 myplugin
() method는 myplugin
component를 생성할 겁니다.
Insert the component with Ajax using the myplugin () method
<!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>
<script src=jquery.mobile/myplugin.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</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);
$("#plug1").myplugin ();
}
});
</script>
이 myplugin
() method call은 HTML 안에서 이루어 졌습니다.
action.php file
<?
$html = "";
$html .= "<div id=plug1>";
$html .= "<p>This is my component</p>";
$html .= "</div>";
echo utf8_encode ($html);
?>
action.php
convention08.html
myplugin.js
(Apache,PHP 서버 까신 후 로컬에서 테스트 해 보세요.)
Using create event
Using the create event is the second approach to create a component with Ajax.
create event를 사용하는 것은 Ajax로 컴포넌트를 생성하는 두번째 접근법입니다.
Insert the component with Ajax using the create event
<!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>
<script src=jquery.mobile/myplugin.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</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);
$("#home").trigger ("create");
}
});
</script>
create event는 컴포넌트를 포함한 HTML element에서 generate 됩니다. (여기서는는 idenrifire 가 home임 )
action.php file
<?
$html = "";
$html .= "<div id=plug1 data-role=myplugin>";
$html .= "<p>This is my component</p>";
$html .= "</div>";
echo utf8_encode ($html);
?>
이전 PHP 코드와 다른 점은 컴포넌트를 정의할 때 data-role="myplugin" attribute 를 반드시 정해줘야 한다는 겁니다. 그렇게 하면 플러그인된 자바스크립트에서와 같이 create event가 진행될 때 이 attribute가 있는 HTML element를 찾게 됩니다.
create event processing in the plugin
// taking into account of the component when creating the window
// or at the create event
$(document).bind ("pagecreate create", function (e)
{
$(":jqmData(role=myplugin)", e.target).myplugin ();
});
e.target
parameter는 identifier가 home으로 지정된 identifier 가 있는 <div>
element 와 연계 됩니다. 이것이 create event 유발하는 element 입니다.
The <div> element associated with the window causes the create event
$("#home").trigger ("create");
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0) | 2012.10.09 |
|---|---|
| 링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0) | 2012.10.08 |
| 두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0) | 2012.10.04 |
| 컴포넌트에 이벤트 생성하고 사용하기 (0) | 2012.10.04 |
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |
| 컴포넌트에 파라미터 전달하기 (0) | 2012.10.03 |
| 컴포넌트 생성 여부 체크하는 방법 (0) | 2012.10.03 |
| 나만의 jQuery Mobile 컴포넌트 만들기 (0) | 2012.10.02 |
| Virtual Events 알아보기 (0) | 2012.09.30 |
| 네임 스페이스 사용하기 (0) | 2012.09.30 |