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

최근에 받은 트랙백

글 보관함

툴바에서 이벤트 다루기

2012. 12. 27. 01:36 | Posted by 솔웅


Manage events on toolbars



툴바는 일반적으로 어떤 action 을 취하기 위해 버튼 역할을 합니다. navigation bar navbar인 경우 <li> elements로 이뤄 집니다. 아이템을 클릭 했을 경우 이 클릭을 handle 하기 위해 click event (or the associated vclick virtual event)를 사용할 수 있습니다.


Use the click event in a navigation bar


<!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 data-position=fixed>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

  </div>

  

  <div data-role=footer data-position=fixed>

    <div data-role=navbar>

      <ul>

        <li><a href=#>Menu 1</a></li>

        <li><a href=#>Menu 2</a></li>

        <li><a href=#>Menu 3</a></li>

        <li><a href=#>Menu 4</a></li>

        <li><a href=#>Menu 5</a></li>

        <li><a href=#>Menu 6</a></li>

      </ul>

    </div>

  </div>

</div>


</body>

</html>


<script>


$("li").bind ("click", function (event)

{

  alert ($(this).find ("a").text ());

});

    

</script>


tistory568_01.html


navigation bar에서 두번째 버튼을 클릭하면 아래와 같이 될 겁니다.





반응형

Comment

  1. 초매 2012.12.27 19:34

    계속 쉬지 않고, 포스팅 하시는 군요...^^
    대단하십니다... 포스팅 자체가 너무 힘이 드는 군요..
    직장인이니까... 하루에 하나 쓴다는게 넘 힘들어요...ㅋㅋㅋ

    • 솔웅 2012.12.28 02:52 신고

      예 그러실거예요.
      글을 쓰는게 쉬운게 아니니까.
      저야 뭐 제가 글 쓰는 건 아니고 영어로 된 자료들 그냥 번역하는 거라서 이렇게 할 수 있을 겁니다.
      그리고 다 제가 당장 배워야 할 것들이라서 제가 배우면서 그냥 그 글 포스팅하고 있구요.
      그리고 여긴 회사에서 좀 일찍 끝나서 시간이 더 많이 있기도 하구요.

      저도 제가 글을 만들어서 올리면 더 힘들거예요.

이전 1 2 3 4 5 6 7 8 9 ··· 137 다음