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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

jQuery Mobile/JQM Tutorial

accordion menu 가 열려 있는지 닫혀 있는지 알아내기

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


반응형
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 가 있는지 여부를 가립니다. 만약 있으면 이 메뉴는 닫힌 상태고 그렇지 않으면 열린 상태입니다.
반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

Ajax로 툴바 insert 하기  (0) 2012.12.25
jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 열고 닫는 것 구현하기  (0) 2012.12.20
Ajax 로 accordion menu 삽입하기  (0) 2012.12.20
HTML을 jQuery Mobile 의 accordion menu 로 변환하기  (1) 2012.12.18
다이나믹 하게 accordion menu 생성하기  (0) 2012.12.17
slider 생성 관련 예제들..  (0) 2012.12.15
jQuery Mobile/JQM Tutorial

accordion menu 열고 닫는 것 구현하기

2012. 12. 20. 06:49 | Posted by 솔웅


반응형
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");

});



반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

jQuery Mobile 툴바로 HTML element 변환하기  (0) 2012.12.25
다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
Ajax 로 accordion menu 삽입하기  (0) 2012.12.20
HTML을 jQuery Mobile 의 accordion menu 로 변환하기  (1) 2012.12.18
다이나믹 하게 accordion menu 생성하기  (0) 2012.12.17
slider 생성 관련 예제들..  (0) 2012.12.15
slider 를 customizing 하기  (0) 2012.12.15
jQuery Mobile/JQM Tutorial

Ajax 로 accordion menu 삽입하기

2012. 12. 20. 06: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");
반응형
저작자표시 비영리 동일조건

'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글

다이나믹하게 툴바 생성하기  (0) 2012.12.25
accordion menu 생성 예제들  (0) 2012.12.23
accordion menu Customizing 하기  (0) 2012.12.22
accordion menu 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
accordion menu 열고 닫는 것 구현하기  (0) 2012.12.20
HTML을 jQuery Mobile 의 accordion menu 로 변환하기  (1) 2012.12.18
다이나믹 하게 accordion menu 생성하기  (0) 2012.12.17
slider 생성 관련 예제들..  (0) 2012.12.15
slider 를 customizing 하기  (0) 2012.12.15
slider 의 이벤트 관리하기  (0) 2012.12.15

티스토리툴바