jQuery Mobile - Toolbar basic

툴바는 모바일 사이트와 어플리케이션에서 header와 footer 그리고 utility bars로 사용됩니다.

Toolbar types

툴바에는 Header와 Footer의 두가지 타입이 있습니다.
1. 페이지 타이틀로 제공되는 Header bar는 보통 두개의 버튼을 가지며 페이지의 타이틀을 이루는 첫번째 요소입니다.
2. Footer bar는 페이지의 마지막에 오는 요소이며, 컨텐츠나 기능적인 면에서 Header보다 더 다양하게 사용됩니다.

두 타입에는 보통 가로의 네비게이션이나 탭 바가 놓여집니다.

Toolbar positioning options

Header와 Footer를 페이지에 위치시키는 방법에는 여러가지가 있습니다. 기본적으로 툴바는 “inline” 포지셔닝 모드르 사용합니다. 이 모드는 javascript과 css 포지셔닝을 지원하지 않더라도 모든 브라우저에서 보여질 수 있습니다.

“fixed” 포지셔닝모드는 자바스크립트의 스크롤의 단점을 보안하는 정적인 툴바의 편리함을 제공합니다. 이 툴바는 “inline”모드 처럼 페이지의 정해진 위치에서 시작되고, 화면이 스크롤되어 질 때 동적으로 툴바의 위치가 이동되어 보여집니다.
언제든지 사용자가 스크린을 터치하면 가시성을 위해 툴바를 보여지거나 안보여지도록 하여 가능한 최대 화면을 필요로 할 때 툴바를 숨길 수 있는 기능을 제공합니다.
사용하기 위해서는 툴바 컨테이너에 data-position=”fixed” 속성을 추가하면 됩니다.

“fullscreen” 포지셔닝모드는 “fixed” 모드와 비슷한데, 페이지를 클릭 해야 툴바가 나타나며, 그렇치 않으면 맨 위 혹은 아래의 툴바를 보여주지 않는 것이 다릅니다. 이 모드는 사진이나 비디오 뷰와 같은 전체 화면을 사용하는 어플에서 유용합니다. 툴바가 화면 컨테츠보다 덜 중요한 상황에서 사용하는 것이 가장 좋습니다.