Home Back

egovframework

Header bar

Header bar는 일반적으로 페이지간 이동을 위하여 브라우저 상단에 위치하며 좌우에 버튼 및 헤더제목틀 넣을 수 있다.

기본코드

Header bar는 기본적으로 검정색으로 나타나며 Header bar의 높이는 Title 크기에 따라 달라진다.

Header title

색상 변경

기본 코드 <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"

버튼 추가

Header bar 에 Anchor 링크를 추가하면 자동으로 버튼이 생성된다. 왼쪽부터 버튼이 나타나며 2개 이상의 버튼은 생성할수 없다. 기본형 <data-role="header"> data-position="inline"을 넣어 버튼이 잘 정렬 되도록 한다. 버튼에 모양은 Icon 을 참조 한다.

Cancel

Add button in header bar

Save
버튼 위치
Header bar에서 버튼의 위치를 지정 할 때는 버튼에 class="ui-btn-[right, left]"를 추가 한다.

class="ui-btn-right"

Options
뒤로 가기
Header bar에 뒤로 가기 버튼을 생성하려면 data-rel="back"을 추가 한다.

Back

back
data-rel="back"은 브라우져 지원 요소에 따라 다르게 동작 할 수도 있어 이전 화면의 링크를 걸어 준 후 data-direction="reverse"를 선언 하면 뒤로 가는 화면 전환 효과와 함께 링크가 정확하게 동작 된다.

Back

back

위치 선정

고정 위치
Header bar의 위치를 브라우저 맨 위/ 끝으로 고정된다. 스크롤 이벤트가 일어날 경우 Header/footer bar는 항상 브라우저의 맨 위와/끝에 나타난다. Header bar의 <div data-role="Header">에 data-position="fixed"를 추가 한다 fixed position 예시 보기
전체 화면 모드
Header/footer bar의 위치를 브라우저 맨 위/ 끝으로 고정하거나 없앨 수 있다. 이벤트가 일어날 경우 Header/footer bar가 나타나거나 없어진다. Header/footer bar의 fixed position과 같은 형태에서 <div data-role="page"> Tag에 data-fullscreen="true"을 추가 한다. fullscreen position 예시 보기

Copyright(c)2012 Ministry of Security and Public Administration.