Load the contents of an accordion menu by Ajax
메뉴를 오픈할 때 Ajax에 의해 각 accordion menu 의 내용을 retrieve 하는 예제를 만들겠습니다. 만약 현재 content 가 empty 일 경우 retrieve 됩니다. 그러니까 매번 메뉴가 open 될 때마다 이 로직이 동작하는 건 아니죠.
Get the contents of the 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>
<div id=id1 data-role=collapsible data-collapsed=true>
<h1>Menu 1 : Click to open / close</h1>
</div>
<div id=id2 data-role=collapsible data-collapsed=true>
<h1>Menu 2 : Click to open / close</h1>
</div>
</div>
</div>
</body>
</html>
<script>
$("#id1, #id2").bind ("collapsiblecreate", function ()
{
$("a.ui-collapsible-heading-toggle", this).bind ("click", function (event)
{
var h1 = $(this).closest ("h1");
var content = h1.siblings (".ui-collapsible-content");
var div = $(this).closest (".ui-collapsible");
if (content.is (".ui-collapsible-content-collapsed") &&
$.trim (content.html ()) == "")
{
$.ajax (
{
url : "action.php",
data : { menu : div.attr ("id") },
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$(content).append (response);
}
});
}
});
});
</script>
각 메뉴는 HTML 안에 내용이 비어져 있는 상태로 생성됩니다. 그리고 ui-collapsible-heading-toggle
class 의 <a>
element 가 있어서 menu 타이틀을 클릭 할 수 있습니다. 이 element 에서 content (of ui-collapsible-content
class) 에 해당하는 <div>
element retrieve 하기 위해 DOM 을 살펴 보게 되죠. 그리고 나서 <div>는 메뉴 타이틀과 content 를 포함하게 됩니다. 이 때 menu 의 id 로 접근을 하게 됩니다.
또한 메뉴가 close 된 상태인지 그리고 content 가 empty 인지 아닌지도 알아낼 수 있습니다. Ajax call 은 메뉴가 close 상태 이면서 empty인 상태에서만 만들어 지거든요. ui-collapsible-content-collapsed
CSS class 가 있으면 content 가 close 인 상태라는 것을 기억해 두세요. 그 클래스가 없으면 open 인 상태 입니다.
action.php file
<?
$menu = $_REQUEST["menu"];
$html = "";
if ($menu == "id1")
{
$html .= "<p> Paragraph 1.1 </p>";
$html .= "<p> Paragraph 1.2 </p>";
$html .= "<p> Paragraph 1.3 </p>";
}
else
{
$html .= "<p> Paragraph 2.1 </p>";
$html .= "<p> Paragraph 2.2 </p>";
$html .= "<p> Paragraph 2.3 </p>";
}
echo utf8_encode ($html);
?>
|
|
|
action27.php
tistory561_01.htmlDynamically change the accordion menu title
The accordion menu title is currently fixed. It is possible to dynamically change, eg change the title as the menu is open or closed.
Change the menu title as the menu is open or closed
<!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>
<div id=id1 data-role=collapsible>
<h1>Menu: closed</h1>
<p> Paragraph 1.1 </p>
<p> Paragraph 1.2 </p>
<p> Paragraph 1.3 </p>
</div>
<div id=id2 data-role=collapsible>
<h1>Menu: closed</h1>
<p> Paragraph 2.1 </p>
<p> Paragraph 2.2 </p>
<p> Paragraph 2.3 </p>
</div>
</div>
</div>
</body>
</html>
<script>
$("#id1, #id2").bind ("collapsiblecreate", function ()
{
$("a.ui-collapsible-heading-toggle").bind ("vclick", function (event)
{
var h1 = $(this).closest ("h1");
if (h1.is (".ui-collapsible-heading-collapsed"))
$("span.ui-btn-text", h1).first ().text ("Menu: open");
else
$("span.ui-btn-text", h1).first ().text ("Menu: closed");
});
});
</script>
|
|
menu title은 ui-btn-text class의 <span> element 에 insert 됩니다. 이것은 title (here <h1>). element 안에 위치하게 되죠. title 안에 여러개의 <span> elements (class ui-btn-text의)가 있을 수 있습니다.이 content 는 jQuery 의 text () method에 의해 modify 됩니다.
Producing an effect at the opening and closing the accordion menu
jQuery 를 사용해서 open/closed 에 대해 visual effect를 줄 수 있습니다. 예를 들어 open 할 떄 show
(1000)효과를 주고 close 할 때 hide
(1000)효과를 줄 수 있습니다.
Effect at the opening and closing accordion menus
<!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>
<div id=id1 data-role=collapsible data-collapsed=true>
<h1>Menu 1: Click to open / close</h1>
<p> Paragraph 1.1 </p>
<p> Paragraph 1.2 </p>
<p> Paragraph 1.3 </p>
</div>
<div id=id2 data-role=collapsible data-collapsed=true>
<h1>Menu 2: Click to open / close</h1>
<p> Paragraph 2.1 </p>
<p> Paragraph 2.2 </p>
<p> Paragraph 2.3 </p>
</div>
</div>
</div>
</body>
</html>
<script>
$("#id1, #id2").bind ("collapsiblecreate", function ()
{
$("a.ui-collapsible-heading-toggle").bind ("vclick", function (event)
{
var h1 = $(this).closest ("h1");
var content = h1.siblings (".ui-collapsible-content");
if (content.is (".ui-collapsible-content-collapsed")) content.show (1000);
else content.hide (1000);
});
});
</script>
|
|
각 accordion menu 의 title 부분을 클릭할 때 이것을 handle 할 수 있습니다. 특히 title 안에 <a>
link 가 있을 때요. 이 <a>
link를 통해서 우리는 ui-collapsible-content
class의 <div>
element 와 연관된 메뉴의 content를 얻기 위해 DOM 을 navigate 할 수 있습니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 툴바에서 이벤트 다루기 (2) | 2012.12.27 |
|---|---|
| Ajax 로 navigation bar 삽입하기 (0) | 2012.12.26 |
| Ajax로 툴바 insert 하기 (0) | 2012.12.25 |
| jQuery Mobile 툴바로 HTML element 변환하기 (0) | 2012.12.25 |
| 다이나믹하게 툴바 생성하기 (0) | 2012.12.25 |
| accordion menu Customizing 하기 (0) | 2012.12.22 |
| accordion menu 가 열려 있는지 닫혀 있는지 알아내기 (0) | 2012.12.20 |
| accordion menu 열고 닫는 것 구현하기 (0) | 2012.12.20 |
| Ajax 로 accordion menu 삽입하기 (0) | 2012.12.20 |
| HTML을 jQuery Mobile 의 accordion menu 로 변환하기 (1) | 2012.12.18 |