반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

JQuery Mobile - Theming Toolbars

2012. 8. 6. 12:57 | Posted by 솔웅


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 공식 튜토리얼을 모두 훑어봐야 겠어요.



반응형

Comment