13. jQuery Mobile 공통 푸터바

Index

11. jQuery Mobile 툴바(푸터바)

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

13. jQuery Mobile 공통 푸터바

14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘)

15. jQuery Mobile 리스트

 

 

각 페이지의 푸터영역에 동일한 내비게이션바가 포함되는 경우에 각 페이지의 내비게이션바 선택 상태가 보관될 필요가 있다. 즉, A페이지에서 B페이지를 선택해서 넘어갔다가 Back 버튼으로 A페이지로 돌아오는 경우 A페이지에서 선택되었던 내비게이션바의 버튼이 선택된 상태가 유지되기를 원한다면 각 페이지에서 선택되어 있어야 하는 버튼에 class="ui-btn-active ui-state-persist" 속성을 추가해 주면 된다.

 

 

A페이지

<div data-role="navbar">
    <ul>
        <li><a href="index.html" class="ui-btn-active ui-state-persist" data-icon="grid">Grid</a></li>
        <li><a href="home.html" data-icon="home">Home</a></li>
    </ul>
</div>

 

B페이지

<div data-role="navbar">
    <ul>
        <li><a href="index.html" data-icon="grid">Grid</a></li>
        <li><a href="home.html" class="ui-btn-active ui-state-persist" data-icon="home">Home</a></li>
    </ul>
</div>