Ajax를 이용해서 accordion menu 를 retrieve 하실 수 있습니다.
Retrieve two accordion menus 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>
<p> This is an accordion menu </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);
$("#id1, #id2").collapsible ();
}
});
</script>
collapsible
() method는 original HTML 코드를 jQuery Mobile 형식의 accordion menu 로 display 할 수 있도록 해 주는 jQuery Mobile 메소드 입니다.
action.php file
<?
$html = "";
$html .= "<div id=id1>";
$html .= "<h1>Menu 1 : Click to open / close </h1>";
$html .= "<p> Paragraph 1.1 </p>";
$html .= "<p> Paragraph 1.2 </p>";
$html .= "<p> Paragraph 1.3 </p>";
$html .= "</div>";
$html .= "<div id=id2>";
$html .= "<h1>Menu 2 : Click to open / close </h1>";
$html .= "<p> Paragraph 2.1 </p>";
$html .= "<p> Paragraph 2.2 </p>";
$html .= "<p> Paragraph 2.3 </p>";
$html .= "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>
|
|
action25.php
tistory552_01.htmlcollapsible
() method를 call 하는 부분을 빼 먹으면 accordion menu는 jQuery Mobile 과는 상관없는 그냥 간단한 HTML element 로 display 될 겁니다.
collapsible
() method를 call 하는 대신에 create
event를 발생시켜서 같은 효과를 내실 수 있습니다.
Create accordion menus by calling the collapsible () method
$("#id1, #id2").collapsible ();
이 부분을 아래와 같이 하시면 됩니다.
Create accordion menus triggering create event on the window
$("#home").trigger ("create");
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 툴바 생성하기 (0) | 2012.12.25 |
|---|---|
| accordion menu 생성 예제들 (0) | 2012.12.23 |
| accordion menu Customizing 하기 (0) | 2012.12.22 |
| accordion menu 가 열려 있는지 닫혀 있는지 알아내기 (0) | 2012.12.20 |
| accordion menu 열고 닫는 것 구현하기 (0) | 2012.12.20 |
| HTML을 jQuery Mobile 의 accordion menu 로 변환하기 (1) | 2012.12.18 |
| 다이나믹 하게 accordion menu 생성하기 (0) | 2012.12.17 |
| slider 생성 관련 예제들.. (0) | 2012.12.15 |
| slider 를 customizing 하기 (0) | 2012.12.15 |
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |