외부메모리 -_-

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%로 렌더링 될 것입니다.

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 -->