JQuery Mobile - Navbar

Simple navbar

jQuery Mobile은 아주 기본적인 navbar 위젯을 가지고 있습니다. 하나의 바에 optional icons와 함께 다섯개의 버튼을 표시할 수 있습니다. 또한 persistent navbar variation 도 있는데요. 페이지 이동시에도 고정돼 있는 탭 바와 비슷합니다.

navbar는 data-role="navbar" attribute 를 가지고 있는 container element 안에 싸여있는 링크들의 정렬되지 않은 리스트로 코딩 됩니다. 아래에는 두개의 버튼이 있는 navbar에 대한 예제입니다.

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

navbar에 있는 링크가 클릭되면 active(selected) 상태가 됩니다. ui-btn-active 클래스는 activated link에 추가되기 전에 navbar 에 있는 모든 anchor들로부터 첫번재로 remove 됩니다. 만약에 이 링크가 다른 페이지로 가는 링크라면 이 클래스는 transition이 완료된 이후에 다시 remove 됩니다.

navbar가 initialization 되고 그곳의 아이템을 active state로 세팅하기 위해서는 class="ui-btn-active" 를 여러분 markup의 해당 anchor에 추가하시면 됩니다. 추가적으로 ui-state-persist를 넣으시면 framework는 그 정보가 DOM에 있는 한 페이지가 보일때마다 active state를 restore 합니다. 예제 파일의 첫번째 예제는 "One"을 active 상태로 세팅 한 navbar를 보여 줍니다.

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

이 경우 navbar 아이템들은 공간을 균등하게 나눠 갖습니다. 각 버튼은 브라우저 윈도우의 1/2씩을 차지 합니다.

navbar01.html

위에 보시는 대로 3번째 아이템을 추가하면 자동적으로 1/3씩 아이템이 공간을 차지합니다.
4개를 배치하면 1/4, 5개를 배치하면 1/5씩 공간을 차지합니다.

navbar의 최대 아이템 수는 5개까지 입니다.

만약 아이템이 5개 이상이면 navbar는 줄을 바꿔서 표시됩니다.

아이템이 1개만 있으면 이 아이템은 100%의 width 를 차지하게 됩니다.

위 예제 파일을 다운 받으신 후 실행해 보시면 직접 눈으로 확인 하실 수 있습니다.

Navbars in headers

navbar를 페이지의 top에 추가하시게 되면 페이지 타이틀과 버튼은 계속 남아 있게 됩니다. navbar를 header block 안에 넣으세요. 바로 타이틀과 버튼 다음에요. 그러면 navbar를 top에 (title 바로 다음 줄에) 표시할 수 있습니다.

Navbars in footers

페이지의 bottom에 navbar를 추가하시면 어떻게 될까요? tab bar 처럼 보이겠죠. data-role="footer" 와 함께 콘테이너에 navbar를 넣어 주세요.





<div data-role="footer">		
	<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><!-- /footer -->

Icons in navbars

data-icon attribute를 추가하면 navbar에 아이콘도 넣을 수 있습니다. 각 anchor에 standard mobile icon을 추가할 수 있습니다. 디폴트로 아이콘은 텍스트 위쪽에 위치됩니다. (data-iconpos="top"). 아래 예제는 footer 안에 있는 navbar에 아아콘을 추가하는 예제입니다.

아이콘은 visual consistency를 위해 각각의 링크에 다는 대신 on the navbar container 에 세팅합니다.

<div data-role="navbar" data-iconpos="bottom">

이 예제는 bottom에 icon이 위치되게 됩니다.

아이콘 포지션은 data-iconpos="left" 와 data-iconpos="right"로 세팅될 수 있습니다.

결과 화면은 첨부 파일을 참조하세요.


Using 3rd party icon sets

여러분은 텍스트 label의 위에 있는 큰 아이콘을 갖는 iOS 스타일의 탭을 표현할 수 있는 Glyphish 같은 인기있는 아이콘 라이브러리를 추가할 수도 있습니다. 그러기 위해 필요한 것은 이 아이콘을 표시하기 위한 링크를 걸고 navbar에 위치를 지정하는 것 뿐입니다. 

아래 이미지는 navbar에 Glyphish icons 를 이용해서 custom style을 구현한 예제입니다.

Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.

Theming navbars

navbar는 parent container로부터 theme swatch를 상속받습니다. (버튼을 상속 받는 것 처럼요.) navbar가 header나 footer에 위치해 있으면 디폴트 툴바 swatch "a" 를 상속 받을 겁니다. 

샘플 파일을 다운 받아 보시면 몇가지 예제를 보실 수 있을 겁니다. 자동적으로 parent's swatch letter를 상속한 겁니다. 이 에제에서는 data-theme attribute를 사용하는 대신에 body swatch(ui-body-a)에 적용하기 위해 manual로  swatch 클래스를 추가했습니다. 이런 경우에도 상속은 같은 방법으로 이루어 집니다.

navbar 아이템에 theme color를 세팅하려면 각각의 link에 data-theme attribute를 추가시고 특정 theme swatch를 지정해 주시면 됩니다. navbar container에 theme swatch를 적용하는 것은 지원되지 않습니다.