data-role="page" 태그안에 data-role="footer"를 삽입한다.
<div data-role="footer"> <h4>Footer content</h4> </div>
footer 툴바 역시 기본적으로 a테마를 적용받으며 ,쉽게 테마를 변경할 수 있습니다.
옵션 및 설정개념은 header와 매우 비슷합니다.
차이는 footer는 덜 구조적이며 유연하기에 왼쪽이나 오른쪽 자동 정렬을 하지 않습니다.
Adding buttons
footer에 추가된 링크나 버튼 마크업은 자동적으로 버튼으로 변경되어 집니다. 공간절약을 위해 문구와 아이콘의 길이만큼 inline 스타일을 셋팅합니다.
툴바의 이동버튼이나 위젯들 사이에는 어떤 패딩값도 없기때문에 패딩을 적용하고 싶다면 class="ui-bar" 속성을 footer태그에 추가합니다.
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<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>data-role="controlgroup" 과 data-type="horizontal"속성을 추가한 태그로 감싸게 되면 버튼 그룹을 만들수 있습니다.
Adding form elements
폼 속성과 다른 컨텐츠도 툴바에 추가될수있습니다.
<div data-role="footer" class="ui-bar" data-position="inline">
<label for="select-choice-1">Shipping:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7day</option>
<option value="rush>Rush: 3days</option>
<option value="express">Express:next day</option>
</select>
</div> Persistent footers
footer가 전체적인 네비게이션 역할을 하는 경우 페이지의 이동중에도 고정된 위치에 보여지길 바랄 겁니다. 이는 JQM에 포함된 영구적인 푸터 특징을 사용하여 이뤄질수 있습니다.
footer가 페이지 이동중에도 자기 위치에 머물 수 있게 하는것은 모든 적절한 페이지들의 footer에 data-id속성을 추가하고, 각각 같은 id값을 사용하여 가능합니다. 현재 페이지와 타겟페이지에 data-id="myfooter"를 추가함으로서, 프레임웍 페이지 애니메이션이 일어나는 동안 같은 곳에 footer 앵커를 유지할 것입니다.
이 효과는 header와 footer에 data-position="fixed" 속성을 셋팅하여야 올바르게 동작할 것입니다.
'Jquery > Jquery mobile' 카테고리의 다른 글
| Fullscreen positioning (0) | 2013.03.08 |
|---|---|
| Fixed positioning (0) | 2013.03.08 |
| Navbars (0) | 2013.03.08 |
| Header bars (0) | 2013.03.07 |
| jquery mobile 시작하기 (0) | 2013.03.07 |
