툴바를 생성하는 것은 jQuery method들을 사용합니다. 그리고 별도의 utility method들도 jQuery Mobile에 의해 추가 됐습니다. 예를 들어 네비게이션 바의 관리를 좀 더 용이하게 하기 위해 navbar
() method를 추가했죠. Navigation bars 들은 표준 navbar component와 연계 돼 있습니다.
툴바에는 두가지 타입이 있습니다. 바로 header (top of the
window) and footer (bottom of the window) 가 있죠. toolbar를 dynamic 하게 생성하는 footer type과 header 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
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 툴바 customize 하기 (0) | 2012.12.27 |
|---|---|
| 툴바에서 이벤트 다루기 (2) | 2012.12.27 |
| Ajax 로 navigation bar 삽입하기 (0) | 2012.12.26 |
| Ajax로 툴바 insert 하기 (0) | 2012.12.25 |
| jQuery Mobile 툴바로 HTML element 변환하기 (0) | 2012.12.25 |
| accordion menu 생성 예제들 (0) | 2012.12.23 |
| accordion menu Customizing 하기 (0) | 2012.12.22 |
| accordion menu 가 열려 있는지 닫혀 있는지 알아내기 (0) | 2012.12.20 |
| accordion menu 열고 닫는 것 구현하기 (0) | 2012.12.20 |
| Ajax 로 accordion menu 삽입하기 (0) | 2012.12.20 |