accordion menu 를 열고 닫는 것은 title 부분을 클릭하면 됩니다. 그리고 trigger
("click") method를 사용해서 그 title 부분이 클릭된것 같은 이벤트를 만들어 낼 수도 있습니다.
<h1>
title 내에는 ui-collapsible-heading
CSS class 가 있고 <a>
link 에는 ui-collapsible-heading-toggle
class 가 있습니다.
이 두 element 들에 click event 를 사용해 보겠습니다.
아래 예제에는 버튼을 달아서 열고 닫고 하는 동작을 하도록 합니다.
Open / close accordion menus managing the click on the <h1> element
<!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>
<a id=btn href=# data-role=button> Open / close menus </a>
</div>
</div>
</body>
</html>
<script>
$("#btn").bind ("click", function (event)
{
$("h1.ui-collapsible-heading").trigger ("click");
});
</script>
|
|
tistory554_01.html
<h1>
element 내부에서 jQuery Mobile 에 의해 <a>
element 를 생성하는데요. 그 부분에서 click 을 simulate 하겠습니다.
Simulate the click on the <a> element with ui-collapsible-heading-toggle class
$("#btn").bind ("click", function (event)
{
$("a.ui-collapsible-heading-toggle").trigger ("click");
});
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| jQuery Mobile 툴바로 HTML element 변환하기 (0) | 2012.12.25 |
|---|---|
| 다이나믹하게 툴바 생성하기 (0) | 2012.12.25 |
| accordion menu 생성 예제들 (0) | 2012.12.23 |
| accordion menu Customizing 하기 (0) | 2012.12.22 |
| accordion menu 가 열려 있는지 닫혀 있는지 알아내기 (0) | 2012.12.20 |
| Ajax 로 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 |