본문 바로가기

Skills/Mobile

[jQuery Mobile] Web/App Hybrid 만들기 3. Header Bar

SMALL

3. Header Bar Button


1. data-icon


 <!-- Header Start -->

<div data-role="header" data-position="inline">

<a href="#" data-icon="delete">Cancel</a>

<h1>Header</h1>

<a href="#" data-icon="check">Save</a>

</div>


data-position="inline" 로 기본 정렬은 필수 이다.




2. class="ui-btn-[right, left]"


<!-- Header Start -->

<div data-role="header" data-position="inline">

<h1>Header</h1>

<a href="#" data-icon="gear" class="ui-btn-right">Options</a>

</div> 




3. data-rel="back" &  data-direction="reverse"


data-rel = "back" - 뒤로가기

<!-- Header Start -->

<div data-role="header" data-position="inline">

<h1>Header</h1>

<a href="#" data-icon="arrow-l" data-rel="back">back</a>

</div>


data-direction = "reverse" - 페이지 이동

<!-- Header Start -->

<div data-role="header" data-position="inline">

<h1>Header</h1>

<a href="index.html" data-icon="arrow-l" data-direction="reverse" >back</a>

</div>












LIST