Header bars

data-role="page" 태그안에 data-role="header"를 삽입하여 사용합니다.

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

Default header features

툴바의 기본 테마는 검정색의 a테마이며 data-theme 속성을 추가하여 사용자가 쉽게 테마 변경이 가능합니다. 사용하면 좌측에 back버튼이 자동으로 생성됩니다. 만약 버튼을 사용하지 않거나 다른용도로 사용할경우 data-backbtn="false" 속성을 추가하여 사용합니다.

Adding buttons

기본적인 헤더설정으로 타이틀문구 양쪽으로 버튼을 설정할수 있습니다.

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

Creating custom back buttons

앵커 태그에 data-rel="back" 속성을 추가하면 뒤로가기 버튼처럼 작동합니다.또한, 단순히 뒤로가기 효과만을 원할 경우 data-direction="reverse" 속성을 사용하면 됩니다.

Default button posisioning

하위링크는 자동으로 첫 링크를 왼쪽 버튼 슬롯에 셋팅하고, 두번째 링크는 오른쪽 버튼 슬롯에 셋팅합니다. 그리고 버튼은 기본적으로 a테마를 적용받게 되며 테마를 설정할 경우 data-theme 속성을 추가하여 설정합니다.
<a href="" data-icon="delete" data-theme="b">Cancel</a>

Controlling button position with classes

버튼 위치는 버튼 앵커 태그에 class를 추가하여 조정이 가능합니다. 앵커태그에 ui-btn-left 혹은 ui-btn-right의 class를 추가합니다. 버튼을 오른쪽에 하나만 위치하게 할 경우는 data-backbtn="false"속성을 추가하고 class 속성에 ui-btn-right을 추가하면 됩니다.
<a href="" data-icon="gear" class="ui-btn-right>Options</a>

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"를 사용하여 돌아가기 버튼의 테마를 변경할수 있습니다.