Header bar
Header bar는 일반적으로 페이지간 이동을 위하여 브라우저 상단에 위치하며 좌우에 버튼 및 헤더제목틀 넣을 수 있다.
기본코드
Header bar는 기본적으로 검정색으로 나타나며 Header bar의 높이는 Title 크기에 따라 달라진다.
Header title
- <div data-role="header">
- <h1>headertitle</h1>
- </div>
색상 변경
기본 코드 <data-role="header"> Tag에 data-theme='[적용테마: a~g]"을 추가한다.
data-theme="a"
data-theme="b"
data-theme="c"
data-theme="d"
data-theme="e"
data-theme="f"
data-theme="g"
- <div data-role="header" data-theme="e">
- <h1>data-theme="e"</h1>
- </div>
버튼 추가
Header bar 에 Anchor 링크를 추가하면 자동으로 버튼이 생성된다.
왼쪽부터 버튼이 나타나며 2개 이상의 버튼은 생성할수 없다.
기본형 <data-role="header"> data-position="inline"을 넣어 버튼이 잘 정렬 되도록 한다.
버튼에 모양은 ICon 를 참조 한다.
- <div data-role="header" data-position="inline">
- <a href="#" data-icon="delete">Cancel</a>
- <h1>Add button in header bar</h1>
- <a href="#" data-icon="check" data-theme="b">Save</a>
- </div>
- 버튼 위치
- Header bar에서 버튼의 위치를 지정 할 때는 버튼에 class="ui-btn-[right, left]"를 추가 한다.
- <div data-role="header" data-position="inline" >
- <h1>class="ui-btn-right"</h1>
- <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
- </div>
- 뒤로 가기
- Header bar에 뒤로 가기 버튼을 생성하려면 data-rel="back"을 추가 한다.
- <a href="#" data-icon="arrow-l" data-rel="back">back</a>
- data-rel="back"은 브라우져 지원 요소에 따라 다르게 동작 할 수도 있어
이전 화면의 링크를 걸어 준 후 data-direction="reverse"를 선언 하면 뒤로 가는 화면 전환 효과와 함께
링크가 정확하게 동작 된다.
- <a href="/guide/guide.do" data-icon="arrow-l" data-direction="reverse" >back</a>
위치 선정
- 고정 위치
- Header bar의 위치를 브라우저 맨 위/ 끝으로 고정된다.
스크롤 이벤트가 일어날 경우 Header/footer bar는 항상 브라우저의 맨 위와/끝에 나타난다.
Header bar의 <div data-role="Header">에 data-position="fixed"를 추가 한다
fixed position 예시 보기
- <div data-role="Header" data-position="fixed">
- <h1>header title</h1>
- </div>
- 전체 화면 모드
- Header/footer bar의 위치를 브라우저 맨 위/ 끝으로 고정하거나 없앨 수 있다.
이벤트가 일어날 경우 Header/footer bar가 나타나거나 없어진다.
Header/footer bar의 fixed position과 같은 형태에서 <div data-role="page"> Tag에 data-fullscreen="true"을 추가 한다.
fullscreen position 예시 보기
- <div data-role="page" data-fullscreen="true">
- <div data-role="header" data-position="fixed">
- <h1>header title</h1>
- </div>
- ...
- <div data-role="footer" data-position="fixed">
- <h1>Footer title</h1>
- </div>
- </div>