반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


Accordion menus도 jQuery 메소드에 의해 관리 됩니다. 그리고 jQuery Mobile에 의해 추가된 collapsible () method도 사용됩니다. 그리고 jQuery Mobile 에 의해서 두개의 새로운 이벤트(expand and collapse)도 추가 됐습니다. Accordion menus는 collapsible standard component 연결돼 있습니다.


Dynamically create an accordion menu


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를 추가하시면 됩니다.


반응형

Comment