accordion menu 를 좀 더 쉽게 관리하기 위해 jQuery mobile 은 bind
() method로 다룰 수 있는 두 가지 새로운 이벤트를 만들었습니다.
The expand event warns that accordion menu was opened (it is already open)
The collapse event warns that accordion menu was closed (it is already closed).
이 두 이벤트들은 <div> elements 에 accordion menu를 정의하면( data-role="collapsible" attribute) 사용할 수 있습니다.
Use the expand and collapse events on the accordion menu
<!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 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>
<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 (event)
{
$(this).bind ("collapse", function (event)
{
alert ("Menu: closed");
});
$(this).bind ("expand", function (event)
{
alert ("Menu: open");
});
});
</script>
|
|
tistory559_01.htmlexpand and collapse events 를 observation 하는 것은 jQuery Mobile 에 의해서 새로운 HTML 코드로 완전히 변환되고 난 후에 일어납니다.
Ajax에 의해 서버로 call 하는 동안에 accordion menu 를 생성해 보겠습니다.
Use the expand and collapse events in accordion menus retrieved 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 ();
$("#id1, #id2").bind ("collapse", function (event)
{
alert ("Menu: closed");
});
$("#id1, #id2").bind ("expand", function (event)
{
alert ("Menu: open");
});
}
});
</script>
action.php file
<?
$html = "";
$html .= "<div id=id1 data-role=collapsible>";
$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 data-role=collapsible>";
$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);
?>
|
|
|
|
action26.php