11. jQuery Mobile 툴바(푸터바)

Index

09. jQuery Mobile 컨텐트

10. jQuery Mobile 툴바(헤더바)

11. jQuery Mobile 툴바(푸터바)

12. jQuery Mobile 툴바(내비게이션바)

13. jQuery Mobile 공통 푸터바

 

 

jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다.

 

 

푸터바

푸터바는 페이지 하단에 위치하는 툴바다. 푸터바는 여러개의 버튼을 포함할 수 있다.(헤더바는 좌우 두개의 버튼만 가질 수 있다)

<div data-role="footer" data-position="fixed">

    //푸터 컨텐트가 위치

</div>

 

data-position="fixed" 속성을 추가하면 푸터바는 페이지 하단에 고정된다. 이 속성을 제거하면 푸터바는 컨텐트의 하단에 붙어서 따라 다닌다.

 

data-position="fixed" 속성이 없는 경우             data-position="fixed" 속성이 있는 경우

 

푸터바도 헤더바처럼 한 페이지에 여러개를 추가할수는 있지만 마지막 푸터바만 페이지 하단에 고정되고 나머지는 컨텐트 하단에 붙어 따라 다닌다. 이런 이유 때문에 두개 이상을 추가할 필요가 없다.

 

 

푸터바 정의할 때 사용할 수 있는 data-* 속성

data-* 속성t	설명	값
data-id	푸터바 ID. 공통 푸터 내비게이션바를 생성할 때 사용	string
data-position	푸터바 고정 여부	fixed
data-theme	푸터바 테마	swatch letter(a-z)

 

 

* 헤더바와 푸터바가 data-position="fixed" 속성에 의해서 고정된 상태에서 페이지 영역을 전체 화면 보기로 설정하면 스크롤의 상태와 상관없이 사용자의 탭에 의해서 숨기고 나타나게 할 수 있다.

 

<div data-role="page" data-fullscreen="true">

    <div data-role="header" data-position="fixed"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer" data-position="fixed"> ... </div>

</div>

 

 

관련글

jQuery Mobile 툴바(헤더바)

jQuery Mobile 툴바(내비게이션바)