인터페이스와 툴바

게시자: 대문 demun 카테고리: 퍼블리셔/jQueryMobile 2011.12.27 06:00
사용자 인터페이스에 대해서 알아봅니다.
이전에 발행된 글도 참고하시기 바랍니다.


jQuery Mobile 의 UI 구성은 html5의 data-* 속성을 지정하는 방식으로 이뤄집니다.


또한 거의 모든 UI컨트롤은 기존 HTML의 표준 태그 기반으로 하기 때문에 최신 브라우져가 아니더라도 최소한의 사용성이 보장됩니다.

물론 최신 브라우져에서는 향상된 스타일과 최상의 UI 경험을 얻을수 있습니다.

1. Page, Header, Content, Footer

jQuery Mobile 은 Page 영역 단위로 화면을 구분한다고 했습니다. Page 영역은 <div>와 같은 컨테이너 태그에 data-role="page" 속성이 지정된 영역을 말합니다.
하나의 html 페이지에 두개 이상의 Page 영역이 존재할 경우 제일 먼저 선언된 Page  영역이 브라우져에 표시됩니다.
그리고 한 Page 영역, 한 화면을 구성하는 레이아웃은 크게 Header, Content, Footer 등으로 나닙니다.

2. 툴 바(Toolbar).

툴 바는 콘텐츠 영역과는 별개로 페이지의 타이틀이나 도구 모음 등을 포함하면서 페이지 상.하단에 고정되 있는 UI 영역을 말합니다.
jQuery Mobile 은 Header bar 와 Footer bar 라는 두개의 기본적인 툴 바와 네비게이션 UI를 표현할 수 있는 Nav bar 를 제공합니다.

Header bar
Header bar 는 페이지 상단에 배치되어 페이지의 타이틀을 표시하고, 좌우에 뒤로 가기나 홈으로 가기 등의 버튼을 제공하는 데 주로 사용합니다.
다음과 같이 <div> 태그에 data-role="header"  속성을 지정하면 페이지에 Header bar 가 표시됩니다.

여기가 해더입니다.


위처럼 마크업하면 아래처럼 보입니다.

인터페이스와 툴바 1



Footer bar.
Footer bar는 Header bar 에 비해 사용 빈도가 높지 않고 특별히 보편화된 사용 패턴이 있는 것도 아닙니다.
그러나 저작권, 알림과 같은 부가 정보를 페이지 하단에 표시하거나 이어서 소개할 네비게이션 바를 하단에 배치할 때 유용하게 사용할 수 있습니다.
html 에서 data-role="footer" 속성을 지정하면 끝입니다.

여기가 푸터입니다.


그럼 아래처럼 나오겠지요.

인터페이스와 툴바 2


Nav bar
Nav bar 는 두개 이상의 버튼을 수평으로 나열해서 하나의 탭 바를 형성하는 UI 컨트롤로 내비게이션 바를 구현할때 유용하게 사용할 수 있습니다.
보통 Header나 Footer 영역에 위치하며 최대 5개의 버튼을 나열할수 있습니다.
이것도 마찬가지로 <div> 태그에 data-role="navbar" 속성을 지정하면 표현할 수 있습니다.
또 각 메뉴중에서 활성화된 상태로 만드려면 class="ui-btn-active" 를 지정하면 됩니다.
예를한번 볼까요?

h4위에 네비게이션 바를 넣었습니다.

인터페이스와 툴바 3


Nav bar는 푸터가 아니더라도 해더에도 넣을수 있습니다.
코드를 보면 footer 에 fexed 를 볼 수 있을겁니다.

Fixed Mode.
콘텐츠의 내용이 길어서 페이지를 위아래로 스크롤하면 Header 와 Footer 가 시야에서 사라집니다. 이걸 방지하기 위해 자동으로 스크롤을 따라다니게 하는것이 바로 Fixed Mode 입니다.
즉 사라졌다, 나타났다를 반복하게 됩니다.
해당 <div> 태그에 data-position="fixed" 속성을 넣어주면 됩니다.

Fullscreen Mode.
Header 나  Footer 가 Fixed Mode 로 설정된 상태에서 Page 영역을 Fullscreen Mode로 설정하면 스크롤의 상태와 상관없이 사용자 탭에 의해 숨기고 나타나기를 반복하게 할 수 있습니다.
이는 사진이나 동영상을 보여주는 화면에서 자주 볼 수 있는 기법으로 툴 바에 의해 영상이 가려지는 것을 방지하는 효과가 있으며 필요할 때 다시 바(bar)를 나타나게 할 수도 있는 아주 편리한 UI 기능입니다.
Page 영역에 data-fullscreen="true" 속성을 추가하고, Header 이나 Footer 에 data-position="fixed" 를 지정하면 됩니다.
예제 코드를 한번 볼까요??

현재는 로컬컴에서 테스트하니 원하는 결과가 잘 안나오네요. 사파리로 한번 열어봤습니다.

인터페이스와 툴바 4

평상시 모습

인터페이스와 툴바 5

풀스크린 모습


신고

댓글