jQuery Mobile‎ > ‎툴바‎ > ‎

푸터 바


푸터는 일반적으로 페이지의 끝 부분에 나타나며 헤더 보다는 자유롭게 구성할 수 있다. 기본적으로 툴바는 패딩을 포함하고 있지 않으므로 푸터에 패딩을 추가하려면 class 속성에 "ui-bar" 값을 추가해 주어야 한다. 툴바에 포함되는 버튼들은 모두 내용에 필요한 크기만을 갖도록 컴팩트하게 맞춰진다.

<footer data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">
삭제</a>
<a href="index.html" data-role="button" data-icon="plus">
추가</a>
<a href="index.html" data-role="button" data-icon="arrow-u">
위로</a>
<a href="index.html" data-role="button" data-icon="arrow-d">
아래로</a>
</footer>

버튼들을 그룹으로 묶으려면 data-role="controlgroup"data-type="horizontal"를 사용한다.

<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="delete">
삭제</a>
<a href="index.html" data-role="button" data-icon="plus">
추가</a>
<a href="index.html" data-role="button" data-icon="arrow-u">
위로</a>
<a href="index.html" data-role="button" data-icon="arrow-d">
아래로</a>
</div>

만일 전체 사이트의 네비게이션에 사용되는 푸터인 경우에, 페이지 전환시에도 푸터가 고정된 위치에 표시되도록 하려면 모든 페이지의 푸터에 동일한 id를 지정하면 된다. 이때, 헤더와 푸터는 "fixed" 위치로 설정되어 있어야 한다.


하위 페이지 (1): 푸터의 속성
Comments