Ajax를 통해서 slider 를 만들 HTML 코드를 retrieve 해서 기존 HTML 페이지에 넣는 예제를 보겠습니다.
Insert a slider 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> Indicate the number of rooms: </span><br />
</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").slider ();
$("input").textinput ();
}
});
</script>
보시면 slider
() 와 textinput
() methods 가 사용됐습니다.
slider () method는 서버로 부터 받은 <input> element 를 jQuery Mobile convention에 맞는 slider 로 변환합니다. 만약 이 메소드를 사용하지 않으면 <input> element는 일반적인 input field 로 표시될 겁니다.
textinput () method는 slider 의 왼쪽에 jQuery Mobile style 의 input field 를 표시합니다. 이 메소드를 사용하지 않으면 jQuery Mobile 스타일이 아닌 input field 가 표시될 겁니다.
action.php file
<?
$html = "";
$html .= "<input type=range min=1 max=5 />";
echo utf8_encode ($html);
?>
slider
() 와 textinput
()메소드의 순서는 상관 없습니다. 이 두 메소드는 trigger
("create") method 를 call 하는걸로 대체할 수 있습니다.
Using the create event to create the slider by Ajax
$.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");
}
});
|
|
action22.php
tistory528_01.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹 하게 accordion menu 생성하기 (0) | 2012.12.17 |
|---|---|
| slider 생성 관련 예제들.. (0) | 2012.12.15 |
| slider 를 customizing 하기 (0) | 2012.12.15 |
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |
| Slider 에 값을 할당하거나 받아오기 (0) | 2012.12.13 |
| HTML element를 jQuery Mobile slider 로 변환하기 (2) | 2012.12.10 |
| 다이나믹하게 slider 생성하기 (0) | 2012.12.09 |
| switch 관련 예제들 (0) | 2012.12.08 |
| Switch 커스터마이징 하기 (0) | 2012.12.08 |
| switch 에서 이벤트 관리하기 (0) | 2012.12.05 |