Examples of manipulation of accordion menus
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);
?>
Dynamically 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 할 수 있습니다.
tistory563_01.html
action27.php
