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

최근에 받은 트랙백

글 보관함


Test whether an accordion menu is open or closed




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 가 있는지 여부를 가립니다. 만약 있으면 이 메뉴는 닫힌 상태고 그렇지 않으면 열린 상태입니다.







반응형

Comment