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

최근에 받은 트랙백

글 보관함

Ajax 로 accordion menu 삽입하기

2012. 12. 19. 13:33 | Posted by 솔웅


Insert accordion menus by Ajax



Ajax를 이용해서 accordion menu 를 retrieve 하실 수 있습니다.


Retrieve two 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>

    <p> This is an accordion menu </p>

  </div>

</div>


</body>

</html>


<script>


$.ajax (

  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

    $("#home div:jqmData(role=content)").append (response);

    

    $("#id1, #id2").collapsible ();

  }

}); 


</script>



collapsible () method는 original HTML 코드를 jQuery Mobile 형식의 accordion menu 로 display 할 수 있도록 해 주는 jQuery Mobile 메소드 입니다.


action.php file


<?
$html = "";
$html .= "<div id=id1>";
$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>";
$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>";
echo utf8_encode ($html);
?>


action25.php

tistory552_01.html


collapsible () method를 call 하는 부분을 빼 먹으면 accordion menu는  jQuery Mobile 과는 상관없는 그냥 간단한 HTML element 로 display 될 겁니다.





collapsible () method를 call 하는 대신에 create event를 발생시켜서 같은 효과를 내실 수 있습니다.


Create accordion menus by calling the collapsible () method


$("#id1, #id2").collapsible ();


이 부분을 아래와 같이 하시면 됩니다.


Create accordion menus triggering create event on the window


$("#home").trigger ("create");




반응형

Comment