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

최근에 받은 트랙백

글 보관함


Open and close an accordion menu


accordion menu 를 열고 닫는 것은 title 부분을 클릭하면 됩니다. 그리고 trigger ("click") method를 사용해서 그 title  부분이 클릭된것 같은 이벤트를 만들어 낼 수도 있습니다.


<h1> title 내에는 ui-collapsible-heading CSS class 가 있고 <a> link 에는 ui-collapsible-heading-toggle class 가 있습니다.

이 두 element 들에 click event 를 사용해 보겠습니다.


아래 예제에는 버튼을 달아서 열고 닫고 하는 동작을 하도록 합니다.


Open / close accordion menus managing the click on the <h1> element


<!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> Open / close menus </a>

  </div>

</div>


</body>

</html>


<script>


$("#btn").bind ("click", function (event)

{

  $("h1.ui-collapsible-heading").trigger ("click");

});


</script>


tistory554_01.html




<h1> element 내부에서 jQuery Mobile 에 의해 <a> element 를 생성하는데요. 그 부분에서 click 을 simulate 하겠습니다.


Simulate the click on the <a> element with ui-collapsible-heading-toggle class


$("#btn").bind ("click", function (event)

{

  $("a.ui-collapsible-heading-toggle").trigger ("click");

});



반응형

Comment