외부메모리 -_-

Theming headers and footers

해더와 풋터는 페이지의 스타일의 중요한 역할을 하기 때문에 기본적으로 ‘a’ 테마가 적용될 것입니다. 다른 테마를 적용하기 원한다면 data-theme 속성에 원하는 테마를 a~e까지 셋팅하면 해당 테마가 적용됩니다. 예를들면, 헤더바를 b로 스위칭합니다.

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

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

페이지의 풋터에 페이지가 이동되어도 유지되는 가로 네비게이션 바를 생성할 수 있습니다. 풋터의 다른 네비게이션 링크를 클릭하면 페이지가 이동되어지면서도 풋터는 고정되어있는 것을 볼 수 있습니다. 연관된 페이지들의 풋터는 같은 data-id 속성을 가지고 있기 때문에 새로운 페이지로 이동되어도 풋터가 고정됩니다.

고정 풋터의 페이지가 보여질때 활성화된 버튼이 남아 있도록 하고 싶다면 ui-btn-active와 ui-state-persist의 class를 추가하면 됩니다.

<div data-role="footer" data-id="foo1" data-position="fixed"> 
<div data-role="navbar"> 
<ul> 
<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li> 
<li><a href="footer-persist-b.html">Albums</a></li> 
<li><a href="footer-persist-c.html">Emails</a></li> 
</ul> 
</div><!-- /navbar --> 
< /div><!-- /footer -->

네비바의 Friends를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다.

이 툴바는 전체 화면을 꽉 채우는 컨텐트를 사용해야하는 특별한 상황에서 사용됩니다. 페이지를 클릭시 해더와 풋터가 보였다 안보였다 하하 원할 때 사용합니다. 보통 사진이나 이미지, 비디오 화면인 경우에 적합합니다.
이를 사용하기 위해서는 data-role=”page” 속성의 div태그에 data-fullscreen=”true”속성을 추가하고, 해더와 풋터에 data-position=”fixed” 속성을 사용하여야 합니다.

Fullscreen 모드는 페이지에 감춰있기 때문에, 모든 컨텐트에서 항상 보여지는 것은 아니니 유의하셔야 합니다. 반면에, fixed 모드는 항상 페이지의 상단과 하단에 보여지며 스크롤로 보여지지 않는 화면에서 터치시 보여지게 됩니다.

<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed"> …. </div>