Accordion menus도 jQuery 메소드에 의해 관리 됩니다. 그리고 jQuery Mobile에 의해 추가된 collapsible () method도 사용됩니다. 그리고 jQuery Mobile 에 의해서 두개의 새로운 이벤트(expand and collapse)도 추가 됐습니다. Accordion menus는 collapsible standard component 와 연결돼 있습니다.
accordion menu는 data-role="collapsible" attribute와 함께 <div> element를 사용해서 생성합니다. HTML title (eg <h1>)은 그 안에 있고 메뉴의 제목을 만들어 줍니다. 그 메뉴의 내용은 <div>안에 있는 다른 element들에 의해 표현 됩니다.
data-role="collapsible-set"
attribute가 있는 다른 <div>
element 안에 accordion menu 가 있다면 한 메뉴를 오픈하면 다른 메뉴들은 닫힐 겁니다. 그래서 한번에 한 메뉴만 열리게끔 만들죠. 역으로 만약 메뉴들이 data-role="collapsible-set"
attribute가 있는 한개의 <div>
element에 속해 있지 않으면 많은 메뉴들이 동시에 열려 있을 수 있습니다.
Create an accordion menu dynamically
<!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>
var 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>";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
tistory546_01.html
디폴트로 각 메뉴들은 닫혀있습니다. 열린 상태로 초기화 하려면 해당 <div>
element에 data-collapsed="false"
attribute를 추가하시면 됩니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 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 |
| slider 생성 관련 예제들.. (0) | 2012.12.15 |
| slider 를 customizing 하기 (0) | 2012.12.15 |
| slider 의 이벤트 관리하기 (0) | 2012.12.15 |
| Slider 에 값을 할당하거나 받아오기 (0) | 2012.12.13 |
| Ajax 로 slider 삽입하기 (0) | 2012.12.11 |