JQuery Mobile - Header structure

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.


<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" data-theme="b">Save</a>
</div>



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>

Adding buttons to toolbars without heading

헤더바 안의 헤딩은 약간의 margin을 가지고 있습니다. 이 마진은 bar의 height을 나타냅니다. 헤딩을 사용하지 않는다면 class="ui-title" 와 함께 element를 추가하셔야 합니다. 그러면 그 바는 hight를 얻어서 정확하게 display 할 수 있을 겁니다.


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

Adding Back buttons

jQuery Mobile은 어떤 헤더에건 자동적으로 back 버튼을 생성하고 추가할 수 있는 기능이 있습니다. 디폴트로는 이 기능이 disabled 돼 있습니다. 이 경우는 chromeless installed application들에서 아주 유용합니다. 예를 들어 native app webview에서 작동할 때 등에서요. jQuery Mobile 프레임워크에서는 페이지 플러그인의 addBackBtn 옵션이 true일 경우 헤더에 자동적으로 back버튼을 추가해 줍니다. 이 기능은 또한 페이지 div 에 data-add-back-btn="true" attribute로 세팅되어져 있으면 적용됩니다.


앵커에 data-rel="back" attribute를 사용하면 앵커에 어느곳을 클릭하던지 back button을 누른 효과가 날 겁니다. history entry의 바로 이전 화면으로 돌아가고 anchor's의 디폴트 href는 무시할 겁니다. 이 기능을 사용할 때 실제로 돌아가는 페이지가 어떤 페이지인지를 알려 줄 수 있는 표시를 해 주세요. href를 걸어달라는 겁니다. 그러면 C-Grade 브라우저를 사용하는 유저에게도 불편함 없이 사용할 수 없도록 할 겁니다.




history 내의 back 화면으로 가는 것이 아니라 reverse transition을 하기를 원하신다면 data-direction="reverse" attribute를 사용하시면 됩니다.

Customizing the back button text

back button text를 configure 하고 싶으시면 페이지 element에 data-back-btn-text="previous" attribute 를 사용하시면 됩니다. 아니면 페이지 플러그인 옵션을 통해서 프로그래밍으로 set 하실 수도 있습니다.

$.mobile.page.prototype.options.backBtnText = "previous";

Default back button style

백 버튼에 role-theme을 설정하고 싶으시면 아래와 같이 하면 됩니다.

$.mobile.page.prototype.options.backBtnTheme = "a";

이 기능을 프로그래밍적으로 하시려면 이 옵션을 mobileinit 이벤트 핸들러에 넣어 주세요.

Custom header configurations

디폴트 세팅이 아닌 헤더를 만들고 싶으면 그냥 콘테이너에 custom styled markup을 씌우시기만 하시면 됩니다. div 같은 걸로요. 플러그인은 헤더 콘테이너 안의 wrapped 콘테이너에 자동 버튼 로직을 적용하지 않을 겁니다. 그러니까 여러분은 여러분 나름대로의 스타일을 넣으실 수 있습니다.

헤더 data-role을 사용하지 않고도 custom bar를 만들 수 있습니다. 예를 들어 ui-bar를 추가해서 스탠다드 바에 apply 하고 ui-bar-b 클래스를 추가해서 여러분의 theme에서 bar swatch styles를 assign 하시면 됩니다.

<div class="ui-bar ui-bar-b">
    <h3>I'm just a div with bar classes and a
       <a href="#" data-role="button">Button</a></h3>
</div>



ui-bar 는 페이지의 full width로 된 헤더나 footer bar에는 추가하지 말아야 합니다. 이렇게 하면 parent container의 full-width element 세팅을 bread out 할 겁니다. full-width 툴바 안에 패딩을 추가하려면 element 안에 툴바의 content를 wrap 하시고 element 대신 padding을 apply 하세요.

하지만 간단하게 style을 적용함으로서 예제 파일의 마지막 바와 같은 메세지 바를 쉽게 만들 수도 있습니다.