IT 기술 따라잡기

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

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

샘플 파일을 다운 받아 보시면 몇가지 예제를 보실 수 있을 겁니다. 자동적으로 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를 적용하는 것은 지원되지 않습니다.

Footer bar structure

footer bar는 data-role attribute 값에footer를 넣는 다는 것 말고는 header와 기본 구조가 같습니다.

<div data-role="footer"> 
	<h4>Footer content</h4> 
</div> 

footer toolbar는 디폴트로 a swatch를 theme으로 사용할 겁니다. 이것은 여러분이 쉽게 set the theme swatch color를 할 수 있습니다.

footer는 이렇게 헤더처럼 미리 그 구조가 짜여져 있지 않기 때문에 여러분이 원하는 디자인 구조를 적용하시려면 grids layout과 custom style을 사용할 것을 권합니다.

Adding buttons

footer에 링크나 button markup 을 추가하면 둘 다 모두 자동적으로 button으로 표시 됩니다. 공간을 절약하기 위해 툴바에 있는 버튼들은 자동적으로 inline styling로 세팅됩니다. 그러니까 그 버튼은 그 안의 텍스트나 아이콘의 너비 만큼 공간을 차지하게 됩니다.

디폴트로 툴바는 nav bar 나 다른 위젯 공간을 위한 padding을 가지고 있지 않습니다. bar에 padding을 넣으려면 class="ui-bar" 를 footer에 추가해야 합니다.

<div data-role="footer" class="ui-bar">
	<a href="index.html" data-role="button" data-icon="plus">Add</a>
	<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
	<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

이 예제는 좌우로 버튼을 한줄 정렬해서 표시하게 됩니다.

아래 예제 파일 다운 받으셔서 소스도 고치시면서 직접 눈으로 확인하시면 더 이해가 쉽게 갈겁니다.

footer01.html

버튼들을 하나의 그룹으로 묶으려면 wrapper 안에 있는 링크들을 data-role="controlgroup",data-type="horizontal" attributes 와 함께 감싸세요.


이렇게 하면 버튼 그룹을 만들 수 있습니다. 위 예제 파일을 확인해 보세요.

Adding form elements

Forms elements 와 다른 content들도 또한 toolbar에 add될 수 있습니다. 위 예제 파일에 footer bar 안의 select menu 예제가 있습니다. data-mini="true" attribute를 추가해서 툴바 안에 mini-sized form elements를 사용할 것을 권장합니다.

Fixed & Persistent footers

footer가 global navigation element인 경우 여러분은 화면이 스크롤 될 때 따라 움직이지 않고 제자리에 표시 되도록  fixed 로 display 하기를 원하실 겁니다.  fixed toolbar persistent도 가능합니다. 이런 경우에는 page transitions이 일어나도 그 툴바는 계속 보일 겁니다. 이 기능은 jQuery Mobile에 포함돼 있는 persistent footer feature를 사용함으로서 구현하실 수 있습니다.

화면전환에도 footer를 계속 보이게 하려면 관계된 모든 페이지의 footer에 data-id attribute를 추가하세요. 물론 id 값은 모두 같아야 합니다. 예를 들어 현재페이지와 다음(target) 페이지에 data-id="myfooter"를 추가하면 framework은 page가 바뀌는 동안에도 같은 지점에 footer를 계속 고정시킬것입니다.

이 기능은 header와 footer가 data-position="fixed"로 세팅돼 있을 때에만 제대로 작동할 겁니다. 그렇게 하면 transition 동안에도 계속 보이게 됩니다.

Header structure

헤더는 대개 페이지 윗부분에 위치하며 페이지 타이틀이 표시되거나 왼쪽이나 오른쪽에 버튼이 있어 이전 이후 페이지로 가도록 하는 기능을 제공하는 툴 바입니다. 헤더는 선택에 따라 fixed로 포지션 될 수 있으며 일러 경우 페이지가 스크롤링 될 때 같이 되지 않고 항상 top 에 위치해 있게 됩니다.

타이틀 글자는 대기 H2 heading element를 사용하지만 H1에서 H6까지 여러분들 선택에 따라 사용하실 수 있습니다. 예를 들어 모바일 페이지에는 여러 페이지들이 있을 수 있고 그 중 home page에는 H1을 그 다음 secondary page에는 H2 element를 사용하실 수 있겠죠. 모든 헤딩 레벨은 시각적인 일관성을 주기 위해 styled 되면 더 좋습니다.

<div data-role="header"> 
	<h1>Page Title</h1> 
</div> 

header01.html

예제들은 위 파일을 받아 보시면 있습니다.

이 블로그에서는 실행이 안되서 따로 파일을 만들었습니다.

이 파일을 실행시키면 아래와 같은 화면을 보실 수 있습니다.

다운 받아서 직접 실행해 보시고 소스도 이것저것 바꿔보세요.

Default header features

헤더 툴바는 디폴트로 a swatch로 theme 돼 있습니다. 하지만 여러분이 원하시면 쉽게 theme swatch color 를 하실 수 있습니다.

예제는 이 글 맨 밑에 있는 첨부파일을 보시면 있습니다.

Adding buttons

표준 헤더 configuration에서 텍스트 헤딩 양쪽에 button들을 위한 slot이 있습니다. 각 버튼들은 anchor element이구요 어떤 button markup이든지 사용하실 수 있습니다. 공간을 절약하기 위해서 툴바에 있는 버튼들은 inline styling로 세팅하세요. 그러면 버튼 크기가 자동적으로 그 버튼안에 있는 텍스트와 아이콘의 크기에 맞게 세팅될 겁니다.

Default button positioning

헤더 플러그인은 헤더 콘테이너의 직속 children이라고 할 수 있습니다. 첫번째 링크는 자동적으로 왼쪽 버튼 slot에 세팅을 하고 두번째 링크는 오른쪽에 세팅합니다. 아래 예제에서 Cancel 버튼은 왼쪽 slot에 나타날 것이고 Save는 오른쪽 slot에 나타날 겁니다.

<div data-role="header" data-position="inline">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check">Save</a>
</div>

Making buttons visually stand out

Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out. Here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.

Controlling button position with classes

버튼의 위치는 버튼 anchor에 class를 add 함으로서 콘트롤 될 수 있습니다. (이 경우에는 소스의 순서가 아니라 설정된 클래스에 따라 위치가 정해지겠죠.) 아래 경우에는 1개의 버튼을 오른쪽에 표시하고 싶을 때 사용하실 수 있을 겁니다. 버튼의 위치를 정하시려면 ui-btn-left 나 ui-btn-right 클래스를 anchor에 넣어 주세요.


<div data-role="header" data-position="inline"> 
	<h1>Page Title</h1>
	<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

<div data-role="header" data-position="inline"> 
	<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
	<span class="ui-title" />
</div>