jQuery Mobile(PhoneGap) [jQuery Mobile] Toolbar

Toolbar

Header bar와 Footer bar 그리고 Navbar를 통칭해서 툴바라고 한다.

Toolbar의 포지션

inline 모드

기본 포지션 값, 스크롤을 하면 툴바도 함께 스크롤 되는 방식이다. 엘러먼트의 속성을 지정하지 않거나, data-position="inline"로 지정한다.

Fixed 모드

툴바의 위치가 고정된다. 엘리먼트의 속성을 data-position="fixed"로 지정한다.

1 2 3

<div data-role="header" data-position="fixed"> <h1>Fixed Header!</h1> </div>

참고 : http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html

Fullscreen 모드

Fixed 모드와 기본적으로 같은데, 사용자가 화면을 터치하는 경우만 Toolbar 컴포넌트가 나타난다. data-fullscreen 속성의 값을 "true"로 지정한다.

1 2 3

<div data-role="header" data-position="fixed" data-fullscreen="true"> <h1>Fixed Header!</h1> </div>

참고 : http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fullscreen.html

Header bar 컴포넌트

일반적으로 페이지마다 나타나고, 그 페이지의 제목과 최대 2개의 버튼을 표시한다.

아래 예제는 제목을 가운데 표시하고, 양쪽으로 버튼을 표시하는 툴바에 대한 예제다.

1 2 3 4 5

<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a> </div>

전체소스

Footer bar 컴포넌트

페이지의 하단에 나타난다. 일반적으로 Header bar 보다 자유로운 방식으로 사용된다.

아래 예제는 Footer bar 컴포넌트에 추가, 위, 아래 버튼을 표시하는 예제다.

1 2 3 4 5

<div data-role="footer" class="ui-bar"> <a href="index.html" data-role="button" data-icon="plus">Add</a> <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> </div>

전체소스

Navbar 컴포넌트

일반적으로 Header/Footer bar 안쪽에 위치하면서 페이지 이동을 위한 네비게이션 기능을 제공한다.

페이지 하단에 navbar 컴포넌트를 삽입하는 예제는 아래와 같다.

1 2 3 4 5 6 7 8 9

<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->

전체소스

5개 이상의 항목을 사용하는 경우는 자동으로 줄바꿈이 된다.