JQuery Mobile - Toolbar types

이제 jQuery Mobile Tutorial 의 Component 부분 중 Page & dialog 를 끝마치고 두번째 주제인 Toolbars 로 들어갑니다.

생각보다 시간이 많이 걸리네요. 어쨌든 조금씩 조금씩 공부해 나가다 보면 조만근 끝까지 돌파 하겠죠?

오늘은 Toolbars 의 첫 시간입니다.

Toolbar types

jQuery Mobile에는 두가지 표준 툴바 종류가 있습니다. : Headers and Footers.

• Header bar는 페이지 title로 사용됩니다. 대부분의 경우 각 mobile page내의 첫번째 엘리먼트가 되죠. 특히 페이지 title이 포함되고 또 두 개의 버튼까지 포함할 수 있습니다.
  
• Footer bar는 대개 각 모바일 페이지의 마지막 element 입니다. 그리고 그 내용과 기능면에서 header 보다 더 자유로운 경향이 있죠. 여기에는 text와 버튼들의 조합이 들어가게 됩니다.
  

header나 footer 안에는 대개 horizontal navigation이나 tab bar 가 들어가는 것이 일반적입니다. jQuery Mobile에는 이런 경우 hirizontal button bar 안에 들어가는 링크들의 리스트 보여줄 수 있는 navbar widget 를 제공하고 있습니다.

이 툴바들에 추가 할 수 있는 attribute들을 모두 보려면 data- attribute reference를 참조하세요.

Toolbar positioning options

header와 footer들은 여러 방법으로 페이지에 위치 지워질 수 있습니다. 디폴트로 툴바들은 inline 포지셔닝 모드를 사용합니다. 이 모드에서는 헤더와 푸터들이 일반적인 문서 flow(default HTML behavior)에 맞게 자리 잡습니다. 이 경우는 JavaScript와 CSS 포지셔닝 지원 여부에 관계 없이 모든 device들에서 작동을 합니다. (visible)

"fixed" positioning mode 는 툴바들을 CSS fixed positioning 을 지원하는 브라우저의 viewport 안에 있는 top 이나 bottom에 툴바들을 위치시킵니다. CSS fixed positioning은 대부분의 데스크탑 브라우저와 iOS5+, 안드로이드 2.2+, 블랙베리 6 등에서 지원합니다. 이 기능을 지원하지 않는 브라우저들에서는 이 툴바들은 페이지내의 inline position으로 지정이 될 겁니다.

tap-togglingl이 가능하면 스크린을 tapping 하면 fixed toolbar의 visibility가 toggle 될 겁니다. 툴바가 보이지 않을 때 페이지를 tap하면 보이게 될 겁니다. 다시한번 tap 하면 사라지구요. 이 기능은 유저에게 필요하기 전에는 툴바를 보이지 않음으로서 컨텐츠가 좀 더 넓은 화면에서 표시될 수 있게 해 줍니다. 기억해 두셔야 될 것은 fixed toolbar는 실제로는 hide 된게 아니라는 겁니다. fixed와 static positioning 사이에서 왔다 갔다 하는 겁니다. 이 의미는 만약 여러분이 페이지 top 에 있다면 그 헤더 툴바를 안 보이도록 tap-toggle 할 수 없다는겁니다. 문서의 아주 밑으로 scroll 됐을 경우 fixed footer에도 이러한 경우는 마찬가지로 적용됩니다.

이 기능을 헤더와 풋터에 세팅하려면 data-position="fixed" attribute를 헤더나 풋터 element에 추가하세요.

"fullscreen" position mode는  fixed mode가 아닐 때 문서의 한 지점을 점유툴바가 페이지 콘텐츠를 덮는것을 제외하고는 fixed mode와 같습니다. 이 기능은 컨텐츠가 전체 스크린을 차지하고 툴바는 숨고 스크린을 탭 했을 때만 나타나도록 하는 포토나 비디오 뷰어 같은 immersive app일 경우에 아주 유용할 겁니다. 이 경우의 툴바들은 페이지 콘텐츠의 위에 자리잡을 것입니다. 그러니까 특정 상황에서 유용하게 사용될 수 있고 어떤 상황에서는 그렇지 않을 수도 있습니다.