jQuery Mobile - Header bars

Header structure

해더는 화면 가장 위에 나타나는 툴바입니다. 보통은 화면의 타이틀 문구와 왼쪽이나 오른쪽에 화면이동이나 어떤 행동을 하기 위한 버튼이 보여 질 수 있습니다.

타이틀 문구로는 일반적으로 <H1> 태그를 사용합니다. 그러나 h1~h6까지 유연하게 사용도 가능합니다. 예를들어, 여러 페이지를 포함하는 화면에서 메인 페이지에는 H1를, 두번째 페이지에서는 H2를 사용합니다. 모든 해더레벨은 기본적인 태그별 스타일이 적용됩니다.

<div  data-role="header">
<h1>Page Title</h1>
</div>

Default header features

해더 툴바의 디폴트 테마는 검정색의 ‘a’ 테마이며, 사용자가 쉽게 테마 변경이 가능합니다.
그리고, 이전 페이지로 돌아가기 편리하도록 프레임웍에서 뒤로가기 버튼을 자동으로 만들어 줍니다. 만약 뒤로 가는 것을 방지하려거나, 왼쪽 위치의 버튼을 다른 용도로 사용하고자 할때는 data-backbtn=”false” 속성을 추가하여 사용합니다.

Adding buttons

기본적인 해더 설정으로는 텍스트 문구 양쪽으로 버튼이 있도록 되어있습니다. 각 버튼은 전형적으로 엥커 태그를 사용합니다만, 어떤 버튼 마크업을 사용해도 됩니다. 공간을 절약하기 위해, 툴바의 버튼은 문구와 아이콘의 사이즈에 맞춰지는 inline 스타일로 셋팅됩니다.

<div data-role="header" data-position="inline">
    <a href="index.html" >Cancel</a>
    <h1>header toolbar </h1>
    <a href="index.html" >Save</a>
</div>

Creating custom back buttons

앵커 태그에 data-rel=”back” 속성을 추가하면 뒤로가기 버튼 처럼 동작할 것입니다. 앵커에 셋팅된 href 값은 무시되어지고 히스토리 엔티티의 이전 페이지로 돌아가게 됩니다. 이런 기능은 홈버튼이나 백버튼이나 다이얼로그에서 닫기 버튼으로 사용됩니다. 이 기능을 사용할 때 C등급의 브라우저에서도 잘 동작할 수 있도록 href 속성을 의미있게 사용해야 합니다. 또한, 단순히 뒤로가기 효과만을 원할 경우 data-direction=”reverse” 속성을 사용하면 됩니다.

Default button positioning

Header 플러그인은 해더 컨테이너 하위 링크를 찾아서 자동으로 첫 링크를 왼쪽 버튼 슬롯에 셋팅하고, 두번째 링크를 오른쪽 버튼 슬롯에 셋팅합니다.

<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">Save</a>
</div>

그리고, 버튼은 기본적으로 a 테마를 적용받게 되며 테마를 설정하려 할때는 data-theme 속성을 추가하여 설정합니다.

<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>

Controlling button position with classes

버튼 위치는 버튼 앵커 태그에 class를 추가하여 조정이 가능합니다. 앵커태그에 ui-btn-left 혹은 ui-btn-right의 class를 추가하는 것은 특별히 하나의 버튼을 오른쪽에 위치 하려 할 때 유용합니다. 버튼을 오른쪽에 하나만 위치하게 하는 방법은 data-backbtn=”false” 속성을 추가하고 class 속성에 ui-btn-right을 추가하면 됩니다.

<div data-role="header" data-position="inline" data-backbtn="false">
    <h1>Page Title</h1>
    <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

Customizing the back button text

이전페이지로 돌아가기 버튼의 텍스트를 설정하고 싶다면, data-back-btn-text=”previous” 속성을 사용하거나, 페이지 플러그인 옵션을 통해 $.mobile.page.prototype.options.backBtnText = “previous”로 셋팅 가능합니다.

Default back button style

$.mobile.page.prototype.options.backBtnTheme = “a” 를 사용하여 돌아가기 버튼의 테마를 변경할 수 있습니다. 프로그램적으로 동작하게 하고 싶다면, mobileinit 이벤트 핸들러에 등록하여 사용합니다.

Custom header configurations

사용자 정의 해더를 사용하려 할때는 header 컨테이너 안에서 사용자 정의 스타일 마크업을 감싸주면 됩니다.