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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

jQuery Mobile/JQM Tutorial

accordion menu Customizing 하기

2012. 12. 22. 19:19 | Posted by 솔웅


반응형
Customize accordion menus




이전 글에서 언급했던 CSS 를 이용해서 accordion menu 를 customizing 할 수 있습니다. title 과 content 두 부분 모두를 customizing 한 예제입니다.


Styling 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>

  

  <style type=text/css>

    .ui-collapsible-heading span.ui-btn-text {

      font-style : normal;

      color : red;

    }

    .ui-collapsible-heading-collapsed span.ui-btn-text{

      font-style : italic;

      color : black;

    }

    .ui-collapsible-content {

      background : black;

      color : white;

      text-align : center;

    }

  </style>

</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>

  </div>

</div>


</body>

</html>



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

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

Ajax 로 navigation bar 삽입하기  (0) 2012.12.26
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 가 열려 있는지 닫혀 있는지 알아내기  (0) 2012.12.20
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
jQuery Mobile

accordion menu에서 이벤트 관리하기

2012. 12. 22. 05:47 | Posted by 솔웅


반응형
Manage events on accordion menus



accordion menu 를 좀 더 쉽게 관리하기 위해 jQuery mobile 은 bind () method로 다룰 수 있는 두 가지 새로운 이벤트를 만들었습니다.

  • The expand event warns that accordion menu was opened (it is already open)

  • The collapse event warns that accordion menu was closed (it is already closed).


이 두 이벤트들은 <div> elements 에 accordion menu를 정의하면( data-role="collapsible" attribute) 사용할 수 있습니다.


Use the expand and collapse events on 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>

  </div>

</div>


</body>

</html>


<script>


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

{

  $(this).bind ("collapse", function (event)

  {

    alert ("Menu: closed");

  });

  $(this).bind ("expand", function (event)

  {

    alert ("Menu: open");

  });

});


</script>

tistory559_01.html


expand and collapse events 를 observation 하는 것은 jQuery Mobile 에 의해서 새로운 HTML 코드로 완전히 변환되고 난 후에 일어납니다.


Ajax에 의해 서버로 call 하는 동안에 accordion menu 를 생성해 보겠습니다.


Use the expand and collapse events in accordion menus retrieved 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 ();


    $("#id1, #id2").bind ("collapse", function (event)

    {

      alert ("Menu: closed");

    });

    $("#id1, #id2").bind ("expand", function (event)

    {

      alert ("Menu: open");

    });

  }

}); 


</script>


action.php file


<?
$html = "";
$html .= "<div id=id1 data-role=collapsible>";
$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 data-role=collapsible>";
$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);
?>


action26.php

tistory559_02.html
반응형
저작자표시 비영리 동일조건
My Shelter/English

Rhode Island에서 세계 최고의 미녀 탄생하다. - Olivia Culpo-

2012. 12. 21. 19:49 | Posted by 솔웅


반응형

이번 대선 결과가 그렇게 난 후 한국 뉴스는 안 접하고 있습니다.

가슴이 쓰리거든요. ;;


제가 사는 로드 아일랜드 지역 인터넷 신문을 보다 보니까 수요일에 있은 미스 유니버스 대회에서 여기 출신이 1등에 뽑혔네요.


정말 정말 반가운 소식입니다. ^^


이번에 holiday season 에 집에 돌아온다고 하는데...

혹시 한번 만나볼수 있을까요?????? ;;



Breaking News
Miss Universe Olivia Culpo coming home to Cranston for the holidays


December 20, 2012 3:50 pm
By Jenna Pelletier



The morning after winning the Miss Universe pageant, Olivia Culpo answers questions during an interview Thursday in Las Vegas.

미스 유니버스 대회에서 1등한 다음날 아침, Olivia Culpo 가 라스베가스에서 목요일 인터뷰에 응하고 있다.



Thrilled and exhausted after her Wednesday night Miss Universe win, Olivia Culpo said she's looking forward to coming home to Cranston for the holidays and "just relaxing."

"I'm excited to see how happy Rhode Island is and it's going to be great to go back," Culpo, 20, said in an interview.


수요일 미스 유니버스에서 우승하고 난 후 그녀는 감격해 있었고 또 지쳐 있었다. Olivia Culpo 는 크리스마스와 연말 시즌을 보내러 Cranston 의 집으로 가는 날을 고대하고 있다고 말했다. 그리고 "그냥 쉴거예요. 저는 로드 아일랜드가 얼마나 행복한지 보고 싶어요 아마 금의환향이 될 거예요." 라고 그녀는 인터뷰에서 말했다.




Echoing comments she made in June after winning the Miss USA crown, Culpo said she thinks it was her ability to "just be myself" that earned her the title.

"It goes to show that you can do anything you want to do as long as you work hard and have the right attitude," she added.

No formal homecoming events are planned at this time.


참고로 그녀는 6월에 Miss USA 왕관을 차지했었다. Culpo는 그냥 솔직한 나 자신을 보여줬던게 이런 좋을 결과를 가져올수 있었다고 말했다.

"열심히 일하고 올바르게 행동하면 당신이 원하는 것은 무엇이든지 할 수 있다는 것을 보여줄거예요." 라고 그녀는 덧 붙였다.

아직까지 공식적인 그녀에 대한 homecoming event는 없다.


IN THE PAPER

Friday: Read more from staff writer Jenna Pelletier's interview with Olivia Culpo, in The Providence Journal.

금요일 The Providence Journal 종이 뉴스에서 Jenna Pelletier 가 진행한 Olivia Culpo 에 대한 더 많은 인터뷰 내용을 보세요.



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

'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
현장에서 배우는 영어 - 크리스마스 카드  (0) 2012.12.20
현장에서 배우는 영어 - Pot Luck Lunch  (0) 2012.12.12
현장에서 배우는 영어 - Knowlege transfer , living document  (0) 2012.12.09

티스토리툴바