jQuery Mobile - Persistent footer navbar

페이지의 풋터에 페이지가 이동되어도 유지되는 가로 네비게이션 바를 생성할 수 있습니다. 풋터의 다른 네비게이션 링크를 클릭하면 페이지가 이동되어지면서도 풋터는 고정되어있는 것을 볼 수 있습니다. 연관된 페이지들의 풋터는 같은 data-id 속성을 가지고 있기 때문에 새로운 페이지로 이동되어도 풋터가 고정됩니다.
고정 풋터의 페이지가 보여질때 활성화된 버튼이 남아 있도록 하고 싶다면 ui-btn-active와 ui-state-persist의 class를 추가하면 됩니다.

<div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
    <ul>
        <li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>
        <li><a href="footer-persist-b.html">Albums</a></li>
        <li><a href="footer-persist-c.html">Emails</a></li>
    </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

네비바의 Friends를 클릭하면 페이지는 해당 링크를 따라 이동 되어지고, 네비바는 고정된 것 처럼 보이게 됩니다.

페이지 이동시 네비바에서 선택된 부분의 활성화를 위해서는 하드코딩을 하거나 스크립트로 제어를 통해 진정한 네비바로 탄생할 수 있게 됩니다.^^