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

최근에 받은 트랙백

글 보관함

accordion menu 생성 예제들

2012. 12. 23. 05:20 | Posted by 솔웅


Examples of manipulation of accordion menus



Load the contents of an accordion menu by Ajax


메뉴를 오픈할 때 Ajax에 의해 각 accordion menu 의 내용을 retrieve 하는 예제를 만들겠습니다. 만약 현재 content 가 empty 일 경우 retrieve 됩니다. 그러니까 매번 메뉴가 open 될 때마다 이 로직이 동작하는 건 아니죠.


Get the contents of the accordion menus by Ajax


<!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 data-collapsed=true>

      <h1>Menu 1 : Click to open / close</h1>

    </div>

    <div id=id2 data-role=collapsible data-collapsed=true>

      <h1>Menu 2 : Click to open / close</h1>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function ()

{

  $("a.ui-collapsible-heading-toggle", this).bind ("click", function (event)

  {

    var h1 = $(this).closest ("h1");

    var content = h1.siblings (".ui-collapsible-content");

    var div = $(this).closest (".ui-collapsible");

    if (content.is (".ui-collapsible-content-collapsed") && 

        $.trim (content.html ()) == "")

    {

      $.ajax (

      

        url : "action.php", 

        data : { menu : div.attr ("id") },

        complete : function (xhr, result)

        {

          if (result != "success") return;

          var response = xhr.responseText;

          $(content).append (response);

        }

      });     

    }

  });

});


</script>


각 메뉴는 HTML 안에 내용이 비어져 있는 상태로 생성됩니다. 그리고  ui-collapsible-heading-toggle class 의 <a> element 있어서 menu 타이틀을 클릭 할 수 있습니다. 이 element 에서 content (of ui-collapsible-content class) 에 해당하는 <div> element retrieve 하기 위해 DOM 을 살펴 보게 되죠. 그리고 나서 <div>는 메뉴 타이틀과 content 를 포함하게 됩니다. 이 때 menu 의 id 로 접근을 하게 됩니다.


또한 메뉴가 close 된 상태인지 그리고 content 가 empty 인지 아닌지도 알아낼 수 있습니다. Ajax call 은 메뉴가 close 상태 이면서 empty인 상태에서만 만들어 지거든요. ui-collapsible-content-collapsed CSS class 가 있으면 content 가 close 인 상태라는 것을 기억해 두세요. 그 클래스가 없으면 open 인 상태 입니다.


action.php file


<?
$menu = $_REQUEST["menu"];

$html = "";
if ($menu == "id1")
{
  $html .=   "<p> Paragraph 1.1 </p>";
  $html .=   "<p> Paragraph 1.2 </p>";
  $html .=   "<p> Paragraph 1.3 </p>";
}
else
{
  $html .=   "<p> Paragraph 2.1 </p>";
  $html .=   "<p> Paragraph 2.2 </p>";
  $html .=   "<p> Paragraph 2.3 </p>";
}
echo utf8_encode ($html);
?>


action27.php

tistory561_01.html


Dynamically change the accordion menu title


The accordion menu title is currently fixed. It is possible to dynamically change, eg change the title as the menu is open or closed.


Change the menu title as the menu is open or closed


<!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: closed</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: closed</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function ()

{

  $("a.ui-collapsible-heading-toggle").bind ("vclick", function (event)

  {

    var h1 = $(this).closest ("h1");

    if (h1.is (".ui-collapsible-heading-collapsed")) 

      $("span.ui-btn-text", h1).first ().text ("Menu: open");

    else 

      $("span.ui-btn-text", h1).first ().text ("Menu: closed");

  });

});


</script>


tistory561_02.html


menu title은 ui-btn-text class<span> element 에 insert 됩니다. 이것은  title (here <h1>). element 안에 위치하게 되죠. title 안에 여러개의 <span> elements (class ui-btn-text)가 있을 수 있습니다.이 content 는 jQuery 의 text () method에 의해 modify 됩니다.


Producing an effect at the opening and closing the accordion menu


jQuery 를 사용해서 open/closed 에 대해 visual effect를 줄 수 있습니다.  예를 들어 open 할 떄 show (1000)효과를 주고 close 할 때 hide (1000)효과를 줄 수 있습니다.


Effect at the opening and closing accordion menus


<!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 data-collapsed=true>

      <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 data-collapsed=true>

      <h1>Menu 2: Click to open / close</h1>

      <p> Paragraph 2.1 </p>

      <p> Paragraph 2.2 </p>

      <p> Paragraph 2.3 </p>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("#id1, #id2").bind ("collapsiblecreate", function ()

{

  $("a.ui-collapsible-heading-toggle").bind ("vclick", function (event)

  {

    var h1 = $(this).closest ("h1");

    var content = h1.siblings (".ui-collapsible-content");

    if (content.is (".ui-collapsible-content-collapsed")) content.show (1000);

    else content.hide (1000);

  });

});


</script>


tistory561_03.html


각 accordion menu 의 title 부분을 클릭할 때 이것을 handle 할 수 있습니다. 특히 title 안에 <a> link 가 있을 때요. 이 <a> link를 통해서 우리는 ui-collapsible-content class의 <div> element 와 연관된 메뉴의 content를 얻기 위해 DOM 을 navigate 할 수 있습니다.

반응형

Comment