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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

My Shelter/English

현장에서 배우는 영어 - 크리스마스 카드

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


반응형

이제 크리스마스 입니다.


즐거운 크리스마스 되세요.


회사에서 크리스마스 카드를 이메일로 돌렸네요.


오늘은 그 내용을 공부해 볼께요.






Christmas is round the corner
so let's greet our colleagues and celebrate

by sharing the joy with them.

Wishing every one a
Merry Christmas
and
Happy New Year

from the tem aaa





크리스마스가 바로 코앞입니다.

동료들과 같이 인사 나누고

기쁨을 같이 나눕시다.


모두

Merry Christmas

and

Happy New Year


aaa 팀으로부터


반응형
저작자표시 비영리 동일조건 (새창열림)

'My Shelter > English' 카테고리의 다른 글

[Blizzard Watch] 폭설 주의보 관련 회사 메일  (0) 2013.02.07
[지역소식] 동성결혼 합법화 주의회 통과  (0) 2013.01.26
[지역소식] 날씨가 많이 춥습니다. 날씨 관련 기사예요.  (0) 2013.01.24
[생활영어] 아파트 관리사무실의 한파 주의보 메일  (0) 2013.01.20
[생활영어] 아파트 관리사무소에서 보내온 한파 대비 안내문  (0) 2013.01.03
지역소식 - Fiscal Cliff 로 세금 더 내게 생김....  (0) 2012.12.28
- 지역 소식 - 로드 아일랜드 젊은이들 어디로 가야 되나?  (0) 2012.12.24
Rhode Island에서 세계 최고의 미녀 탄생하다. - Olivia Culpo-  (0) 2012.12.21
현장에서 배우는 영어 - Pot Luck Lunch  (0) 2012.12.12
현장에서 배우는 영어 - Knowlege transfer , living document  (0) 2012.12.09
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

티스토리툴바