JQuery Mobile - Theming Toolbars

Bar theming

header와 footer bar 모두 디폴트로 theme a 로 스타일 됐습니다. 왜냐하면 이 바들은 특히 페이지의 visual hierarchy에서 primary 이기 때문이죠.

Theming headers and footers

이 header와 footer 바에 다른 theme을 적용하려면 data-theme attribute를 추가하시고 특정 테마 swatch (a,b,c, etc.)를 넣으시면 됩니다. 예를 들어 아래 예제는 swatch b를 설정하는 소스코드입니다.

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

Theming buttons in toolbars

header 블럭에 링크를 추가하게 되면 자동적으로 버튼으로 만들어지고 테마는 그 바의 테마 swatch가 적용 됩니다. 이 버튼만 다른 테마를 적용하시려면 data-theme attribute를 사용해서 그 버튼만 다른 테마가 적용되도록 만들 수 있습니다. 에를들어 헤더를 테마 c가 적용되도록 하면 양쪽의 버튼은 자동적으로 테마 c 가 적용된 버튼이 됩니다. 그 중 Save 버튼만 튀게 보이게 하고 싶으면 data-theme attribute를 오버라이드 해서 Save 버튼의 anchor에  다른 테마를 적용해서 넣으시면 됩니다.

<a href="add-user.php" data-theme="b">Save</a> 

Theme variations

아래는 헤더와 footer 바에 그리고 그 안의 버튼들에 다양하게 테마를 적용한 경우들 입니다.

Headers

Footers

아래는 안에 link 버튼이 들어있는 footer 바들 입니다. footer는 header하고 약간 다른 prescriptive markup convention을 가지고 있습니다. 헤더에서는 링크만 걸면 자동으로 버튼 모양으로 만들어지고 또 2개 까지만 만들수 있고 하는 규칙이 있는데 footer에는 그런 규칙이 없습니다. 그래서 원하시는 디자인으로 꾸미시려면 layout grids 나 다른 custom styles로 만드실 수 있습니다.

bars-themes.html

여기까지 jQuery Mobile Tutorial의 Toolbars 부분을 마치고 다음부터는 Buttons 부분으로 들어갑니다.
이제 본격적으로 jQuery Mobile 프로젝트가 시작할것 같으니까 좀 더 속도를 내서 jQuery Mobile 공식 튜토리얼을 모두 훑어봐야 겠어요.