accordion menu 가 닫혔을 때 jQuery Mobile 은 그 안의 내용이 안 보이도록 ui-collapsible-content class 가 있는 <div> element 에 ui-collapsible-content-collapsed CSS class 를 추가 합니다. 이 추가된 CSS class 는 display CSS property 를 none으로 세팅합니다. 이것은 메뉴의 내용을 숨기도록 하죠.
또한 menu title 에도 ui-collapsible-heading-collapsed
class를 할당합니다. 메뉴가 닫혔다는 것을 가리키기 위해서죠.
메뉴가 열렸는지 닫혔는지를 테스트 하려면 <h1>
element가 title 을 defining 하고 있는지를 보던지 content 를 defining 하는 <div>
element에 ui-collapsible-heading-collapsed
(for title) or ui-collapsible-content-collapsed
(for content) classes 가 있는지 없는지 살펴보면 됩니다. 이 클래스들 중 하나라도 있으면 메뉴는 닫혀있는 것이고 아니면 열려 있는 겁니다.
아래 예제는 버튼을 사용하는 window 의 accordion menu 들의 상태를 display 하는 겁니다.
View the status of 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>
<a id=btn href=# data-role=button> Indicate the status of menus </a>
</div>
</div>
</body>
</html>
<script>
$("#btn").bind ("click", function (event)
{
var txt = "";
if ($("#id1 h1.ui-collapsible-heading-collapsed").length)
txt += "Menu 1: closed\n";
else
txt += "Menu 1: open\n";
if ($("#id2 h1.ui-collapsible-heading-collapsed").length)
txt += "Menu 2: closed\n";
else
txt += "Menu 2: open\n";
alert (txt);
});
</script>
|
|
tistory555_01.html각 menu title 에 ui-collapsible-heading-collapsed class 가 있는지 여부를 가립니다. 만약 있으면 이 메뉴는 닫힌 상태고 그렇지 않으면 열린 상태입니다.
|
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Ajax로 툴바 insert 하기 (0) | 2012.12.25 |
|---|---|
| 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 |