이제 Ajax를 통해서 HTML element를 버튼으로 만들어서 화면에 그 버튼을 표시하려고 합니다. 첫번째 버튼은 링크 처럼 <a>
element 이고 두번째 버튼은 type="submit" attribute 를 가지고 있는 <input>
button 이 될 것입니다.
Insert buttons in a window via 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>
<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);
$("#btn").button ();
$("input[type=submit]").button ();
}
});
</script>
서버에 있는 action.php file 이 이 두개의 버튼을 만들 HTML 코드를 return 할 겁니다.
action.php file
<?
$html = "";
$html .= "<a id=btn href=#>Menu 1</a>";
$html .= "<input type=submit value=Submit />";
echo utf8_encode ($html);
?>
action3.php
tistory431_01.html
서버로부터 소스를 받을 시간동안 약간 기다리면 두개의 버튼이 화면에 뜨시는 것을 보실 겁니다.
자바스크립트 부분을 잘 보세요. button
() method를 사용했습니다. 이 메소드는 서버로부터 받은 두개의 HTML element들을 jQuery Mobile 에 의해 standard button들로 화면에 뿌려주도록 합니다. 만약 소스가 잘 못됐던가 해서 이 과정이 실패하면 화면에는 링크와 일반적인 HTML 버튼이 뿌려질겁니다.
다른 jQuery Mobile component들과 같이 component를 생성하는 standard method 는 (button () method 같은) 그 버튼을 포함한 element에서trigger ("create") method를 call 함으로서 구현할 수도 있습니다. 아래에 예제를 보시겠습니다.
Use the create event to create the button
<!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>
<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로 두개의 버튼을 생성할 수 있습니다. 여기서 첫번째 버튼에다가 이것을 button component로 바꿀 거라는 것을 알리기 위해 data-role="button"
attribute를 추가 해야 합니다 두번째 버튼에는 <input>
element 이기 때문에 필요없습니다.
action.php file
<?
$html = "";
$html .= "<a id=btn data-role=button href=#>Menu 1</a>";
$html .= "<input type=submit value=Submit />";
echo utf8_encode ($html);
?>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| HTML element 를 jQuery Mobile table 로 변환하기 (0) | 2012.11.02 |
|---|---|
| 다이나믹하게 테이블 생성하기 (0) | 2012.11.02 |
| 버튼 관련 예제 파일 들 (0) | 2012.10.31 |
| 버튼 Customize 하기 (0) | 2012.10.31 |
| 버튼에서 발생하는 이벤트 관리하기 (0) | 2012.10.30 |
| HTML element를 jQuery Mobile 버튼으로 변환하기 (0) | 2012.10.30 |
| 다이나믹하게 버튼 생성하기 (0) | 2012.10.29 |
| 리스트 다루기 예제 (0) | 2012.10.29 |
| 리스트 Customization 하기 (0) | 2012.10.26 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |