jQuery Mobile - navbar

JQM은 보통 header나 footer 안에 존재하는 바에 옵션 아이콘 5개 버튼까지 제공하는데 유용한 기본적인 navbar 위젯을 가지고 있습니다.

Navbar는 data-role=”navbar”를 가지는 컨테이너 엘리먼트로 감싸져 있는 링크들의 리스트로 코드화되어 있습니다. 엥커 태그에 class=”ui-btn-active” 속성을 추가 하면 링크들중 하나를 active(seleted) 상태로 셋팅하게 됩니다. 다음 예제는 footer내에 두개의 버튼으로 이루어진 navbar에서 “One” 버튼을 활성화 하였습니다.

<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html" class="ui-btn-active">One</a></li>
            <li><a href="b.html">Two</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

Navbar의 아이템들은 균일하게 공간을 나누어 셋팅됩니다. 이 경우 브라우저의 가로길이의 반씩을 차지하게 됩니다.
Navbar는 최대 5개의 아이템들을 수용할 수 있습니다.
만약, 5개 이상의 아이템을 추가하면 여러 라인들로 보여질 것입니다.
아이템이 1개인 navbar는 브라우저 가로 길이의 100%로 렌더링 될 것입니다.

Navbars in headers

페이지의 상단에 navbar를 추가하길 원할 경우에도 페이지 타이틀과 버튼들은 계속 가지고 있을 것입니다. header 블록안에 navbar 컨테이너는 소스상으로 타이틀과 버튼들 다음위치에 추가합니다.

    <div data-role="header">
        <h1>I'm a header</h1>
        <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
               
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

Icons in navbars

Data-icon 속성을 추가하여 navbar 아이템에 아이콘을 추가할 수 있습니다.

<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="grid">Summary</a></li>
            <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
            <li><a href="#" data-icon="gear">Setup</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

그리고 각 앵커에 data-iconpos=”top” 속성을 추가하여 위에 레이블이 쌓여집니다.
 
그런데, 디폴트가 top 인듯 하네요.
bottom이나 right와 같은 속성 값은 적용이 안됨.


Using 3rd party icon sets

iOS 스타일 탭 아카이브인 Glyphish와 같은 유명한 라이브러리의 어느 아이콘도 추가 할 수 있습니다. 텍스트 래벨의 위에 큰 아이콘이 올라갑니다.
navbar안에 아이콘을 위치시키고 링크하는 것은 사용자 스타일의 작은 부분입니다.
아래는 navbar안에 Glyphish 아이콘을 사용하고 사용자 스타일을 만드는 예제입니다.

    <style type="text/css">   
        .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
        .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
        #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
        #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
        #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
        #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
        #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
        #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
    </style>
   
    <div data-role="footer" class="nav-glyphish-example">
        <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
        <ul>
            <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
            <li><a href="#" id="email" data-icon="custom">Email</a></li>
            <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
            <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
            <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
        </ul>
        </div>
    </div>

Theming navbars

Navbars은 data-theme속성에 의해 어떤 테마 색으로도 셋팅 할 수 있습니다.

<div data-role="footer">
        <div data-role="navbar" data-theme="e" >
            <ul>
                <li><a href="#" data-icon="grid" data-iconpos="top" data-theme="b">Summary</a></li>
                <li><a href="#" data-icon="star" class="ui-btn-active" data-iconpos="top" data-theme="b">Favs</a></li>
                <li><a href="#" data-icon="gear" data-iconpos="top" data-theme="b">Setup</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->