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

최근에 받은 트랙백

글 보관함

툴바 customize 하기

2012. 12. 27. 05:19 | Posted by 솔웅


Customize toolbars



이전 글에 있던 navigation bar 를 보죠. 우리는 단지 세개의 <li> elements만 사용해서 그 navigation bar 를 display 했었습니다. 그러면 jQuery Mobile 에 의해서 생성된 HTML 코드는 어떤지 Firebug를 통해서 볼까요?





각 <li> element이 정의된 테이블 안에 ui-navbar class가 생겼습니다.

<li> item에는 버튼에 해당하는 ui-btn class 를 가지고 있는 <a> link가 있구요. 이 링크는 클릭이 일어났을 때 ui-btn-active CSS class 를 갖게 될 겁니다. 그리고 다른 링크가 클릭되면 그 클래스는 없어집니다.


이 navigation bar를 우리 마음대로 꾸미기 위해서 이 CSS 클래스들을 이용할 수 있습니다.


Styling navigation bars


<!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-navbar a.ui-btn{

      font-size : 16px;

    }

    .ui-navbar a.ui-btn.ui-btn-active{

      font-style : italic;

      background : red;

    }

  </style>

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

      </ul>

    </div>

  </div>

</div>


</body>

</html>


tistory569_01.html







반응형

Comment