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

Index

10. jQuery Mobile 툴바(헤더바)

11. jQuery Mobile 툴바(푸터바)

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

13. jQuery Mobile 공통 푸터바

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

 

 

jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다.

 

 

내비게이션바

내비게이션바는 두개 이상의 버튼을 수평으로 나열해서 하나의 탭바를 형성하는 UI 이다. 주로 헤더바나 푸터바 안에 위치하며 최대 5개까지의 버튼을 가질 수 있다. 버튼이 5개를 넘어가면 한줄에 2개씩 멀티 라인을 형성하기 때문에 헤더바나 푸터바에는 위치할 수 없다.

 

내비게이션바는 <div data-role="navbar"></div> 로 정의한다.

 

<div data-role="navbar">

    <ul>

        <li><a href="#" data-icon="grid" class="ui-btn-active">Grid</a></li>

        <li><a href="#" data-icon="star">Fav</a></li>

        <li><a href="#" data-icon="gear">Option</a></li>

        <li><a href="#" data-icon="check">Check</a></li>

        <li><a href="#" data-icon="home">Home</a></li>

    </ul>

</div>

 

페이지가 로딩될때 내비게이션바의 특정 버튼이 선택된 상태로 표시되게 하기 위해서는 버튼을 정의하는 <a> 태그에 class="ui-btn-active" 속성을 추가한다.

 

 

 

내비게이션바의 버튼은 사용자 정의 아이콘을 사용할 수 있다.

 

<style>

    .nav-glyphish-example .ui-btn .ui-btn-inner {

        padding-top : 40px;

    }

    .nav-glyphish-example .ui-btn .ui-icon {

        width : 30px;

        height : 30px;

        margin-left : -15px;

        box-shadow : none;

        -moz-box-shadow : none;

        -webkit-box-shadow : none;

        -webkit-border-radius : 0;

        border-radius : 0;

    }

    #chat .ui-icon {

        background : url(../image/glyphish/chat.png) 50% 50% no-repeat;

        background-size : 24px 22px;

    }

</style>

 

<div data-role="navbar" class="nav-glyphish-example">

    <ul>

        <li><a href="#" id="chat" data-icon="custom">Chat</a></li>

        <li><a href="#" data-icon="gear">Option</a></li>

        <li><a href="#" data-icon="check">Check</a></li>

    </ul>

</div>

 

 

관련글

jQuery Mobile 툴바(헤더바)

jQuery Mobile 툴바(푸터바)