jQuery Mobile - Footer bar

Footer bar는 data-role이 footer 값인것 외에 header 와 같은 구문을 사용합니다.

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

footer 툴바 역시 기본적으로 a 테마를 적용받으며, 쉽게 테마를 변경할 수 있습니다.
옵션 및 설정하는 개념이 header 와 매우 비슷합니다.
가장 큰 차이는 footer는 header보다 비교적 덜 구조적이며 유연하기에 왼쪽이나 오른쪽으로 자동 정렬을 하지 않습니다.

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><!-- /footer -->

data-role=”controlgroup” 과 data-type=”horizontal” 속성을 추가한 태그로 감싸게 되면 버튼 그룹을 만들수 있습니다.
<div data-role="controlgroup" data-type="horizontal">


Adding form elements

폼 엘리먼트와 다른 컨텐트도 툴바에 추가되어 질수 있습니다. 다음은 footer bar에 선택바를 넣은 예제입니다.

<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" data-theme="a">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

Persistent footers

Footer가 전체적인 네비게이션 역할을 하는 상황의 경우에 여러분은 페이지의 이동 중에서도 고정된 위치에 보여지길 바랄 겁니다. 이는 JQM에 포함된 영구적인 푸터 특징(persistent footer feature)을 사용하여 이뤄질 수 있습니다.

Footer가 페이지 이동중에도 자기 위치에 머물 수 있게 하는 것은 모든 적절한 페이지들의footer에 data-id속성을 추가하고, 각각 같은 id 값을 사용하여 가능합니다. 현재 페이지와 타겟 페이지에 data-id=”myfooter”를 추가함으로써, 프레임웍은 페이지 애니메이션이 일어나는 동안 같은 곳에 footer 앵커를 유지 할 것입니다.
유의사항 : 이 효과는 header와 footer에 data-position=”fixed” 속성을 셋팅하여야 올바르게 동작할 것입니다