JQuery Mobile - Footers

Footer bar structure

footer bar는 data-role attribute 값에footer를 넣는 다는 것 말고는 header와 기본 구조가 같습니다.

<div data-role="footer"> 
	<h4>Footer content</h4> 
</div> 

footer toolbar는 디폴트로 a swatch를 theme으로 사용할 겁니다. 이것은 여러분이 쉽게 set the theme swatch color를 할 수 있습니다.

page footer는 옵션과 configuration 관련해서는 헤더와 아주 유사합니다. 가장 크게 다른 부분은 footer는 헤더보다 그 기능이 적다는 겁니다. 특히 구조와 관련해서요. 그래서 framework는 헤더에 자동적으로 적용했던 왼쪽 오른쪽의 버튼을 위한 slot을 제공하지 않습니다.

footer는 이렇게 헤더처럼 미리 그 구조가 짜여져 있지 않기 때문에 여러분이 원하는 디자인 구조를 적용하시려면 grids layout과 custom style을 사용할 것을 권합니다.

Adding buttons

footer에 링크나 button markup 을 추가하면 둘 다 모두 자동적으로 button으로 표시 됩니다. 공간을 절약하기 위해 툴바에 있는 버튼들은 자동적으로 inline styling로 세팅됩니다. 그러니까 그 버튼은 그 안의 텍스트나 아이콘의 너비 만큼 공간을 차지하게 됩니다.

디폴트로 툴바는 nav bar 나 다른 위젯 공간을 위한 padding을 가지고 있지 않습니다. bar에 padding을 넣으려면 class="ui-bar" 를 footer에 추가해야 합니다.

<div data-role="footer" class="ui-bar">
	<a href="index.html" data-role="button" data-icon="plus">Add</a>
	<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
	<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

이 예제는 좌우로 버튼을 한줄 정렬해서 표시하게 됩니다.

아래 예제 파일 다운 받으셔서 소스도 고치시면서 직접 눈으로 확인하시면 더 이해가 쉽게 갈겁니다.

footer01.html

.ui-bar는 페이지의 full width로 하기 위해 헤더나 footer에 추가하시면 안됩니다. 추가적인 padding은 parent container의 full-width element를 break 할 겁니다. full-width toolbar 안에 padding을 추가하려면 element 안에 툴바의 contents를 감싸고 이 padding을 그 element에 추가하세요.

버튼들을 하나의 그룹으로 묶으려면 wrapper 안에 있는 링크들을 data-role="controlgroup",data-type="horizontal" attributes 와 함께 감싸세요.


<div data-role="controlgroup" data-type="horizontal">

이렇게 하면 버튼 그룹을 만들 수 있습니다. 위 예제 파일을 확인해 보세요.

Adding form elements

Forms elements 와 다른 content들도 또한 toolbar에 add될 수 있습니다. 위 예제 파일에 footer bar 안의 select menu 예제가 있습니다. data-mini="true" attribute를 추가해서 툴바 안에 mini-sized form elements를 사용할 것을 권장합니다.

Fixed & Persistent footers

footer가 global navigation element인 경우 여러분은 화면이 스크롤 될 때 따라 움직이지 않고 제자리에 표시 되도록  fixed 로 display 하기를 원하실 겁니다.  fixed toolbar persistent도 가능합니다. 이런 경우에는 page transitions이 일어나도 그 툴바는 계속 보일 겁니다. 이 기능은 jQuery Mobile에 포함돼 있는 persistent footer feature를 사용함으로서 구현하실 수 있습니다.

화면전환에도 footer를 계속 보이게 하려면 관계된 모든 페이지의 footer에 data-id attribute를 추가하세요. 물론 id 값은 모두 같아야 합니다. 예를 들어 현재페이지와 다음(target) 페이지에 data-id="myfooter"를 추가하면 framework은 page가 바뀌는 동안에도 같은 지점에 footer를 계속 고정시킬것입니다.

이 기능은 header와 footer가 data-position="fixed"로 세팅돼 있을 때에만 제대로 작동할 겁니다. 그렇게 하면 transition 동안에도 계속 보이게 됩니다.