jQuery mobile

Toolbar

Toolbar

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

Toolbar의 포지션

inline 모드

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

Fixed 모드

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

<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"로 지정한다.

<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개의 버튼을 표시한다.

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

<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 컴포넌트에 추가, 위, 아래 버튼을 표시하는 예제다.

<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 컴포넌트를 삽입하는 예제는 아래와 같다.

<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개 이상의 항목을 사용하는 경우는 자동으로 줄바꿈이 된다.

참고

jQuery Mobile 툴바 메뉴얼

댓글

댓글 본문
  1. 허공
    감사합니다!
  2. JustStudy
    고맙습니다
  3. imkurtkim
    감사합니다.
  4. James Kim
    <div data-position="inline" data-role="header"> <h1>Edit Contact</h1> Save</div>
    위와 같이 써보세요.class="ui-btn-right" <-- 이걸 통해서 오른쪽으로 배치할 수 있습니다.
    대화보기
    • egoing
      죄송합니다만 질문을 잘 이해를 못했습니다. ^^ 다시 한번 설명 부탁드릴께요. (참고로 동영상을 기준으로 질문해주시면 제가 동영상을 다시 봐야 하기 때문에 어려움이 있습니다.)
      대화보기
      • jQuery Mobile 을 공부중인 학생입니다..툴바를 공부하던 중 정말 좋은 사이트를 만나게 되서 영광이네요.
        조심스럽게 질문하나 해봅니다.
        툴바를 만들고 위에 동영상 같이 툴바아이콘을 2개를 배치할땐 상관이 없지만..
        한개만 배치하게 된다면 자동으로 왼쪽으로 지정이 되어있네요..왼쪽에는 아이콘을 오른쪽으로 배치하게끔 하는 방법이 없을까요??
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기