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

최근에 받은 트랙백

글 보관함


툴바를 생성하는 것은 jQuery method들을 사용합니다. 그리고 별도의 utility method들도 jQuery Mobile에 의해 추가 됐습니다. 예를 들어 네비게이션 바의 관리를 좀 더 용이하게 하기 위해 navbar () method를 추가했죠. Navigation bars 들은 표준 navbar component와 연계 돼 있습니다.



Dynamically create a toolbar


툴바에는 두가지 타입이 있습니다. 바로 header (top of the window) and footer (bottom of the window) 가 있죠. toolbar를 dynamic  하게 생성하는 footer typeheader toolbars 들은 HTML 안에 포함이 되게 되는데요 header toolbars 에는 이전 페이지로 돌아가도록 하는 Back button 이 있을 수 있습니다.


Dynamic creation of a footer toolbar


<!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> Window content </p>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=footer data-position=fixed>";

html +=   "<h1> Footer part </h1>";

html += "</div>";


$("#home").append (html);


</script>


tistory563_01.html






반응형

Comment