Home Back

egovframework

Tabs

탭은 버튼이 수평으로 나열된 형태로 모바일 환경에 최적화된 내비게이션 UI를 제공한다. Navbar(Tab)는 Header와 Footer 영역에 사용 되며 1~5개 까지 배치 할 수 있고 옵션을 통해 icon 표시가 가능 하다.

기본코드

data-role="navbar" 를 이용하여 내비게이션 기능을 사용하며 ui-btn-active 클래스 값으로 활성화된 탭을 나타낼 수 있다.

eGovFrame

navbar 배치

<li> Tag를 사용하여(1~5개) Navbar 의 배치를 설정 할 수 있다. Navbar 항목에 <li> Tag를 1개 사용할 경우 브라우져 화면의 100% 너비를 사용한다.

eGovFrame

Navbar 항목에 <li> Tag를 2개 사용할 경우 브라우져 화면의 100%를 1/2 씩 나누어 배치 한다.

eGovFrame

Navbar 항목에 <li> Tag를 3개 사용할 경우 브라우져 화면의 100%를 1/3 씩 나누어 배치 한다.

eGovFrame

Navbar 항목에 <li> Tag를 4개 사용할 경우 브라우져 화면의 100%를 1/4 씩 나누어 배치 한다.

eGovFrame

Navbar 항목에 <li> Tag를 5개 사용할 경우 브라우져 화면의 100%를 1/5 씩 나누어 배치 한다.

eGovFrame

Navbar 항목에 <li> Tag를 5개 이상 사용할 경우 한 행에 2개열로 구성된 단순한 다중행 형태로 배치 된다.

형태변경 (둥근 탭)

Navbar 내부의 Anchor Tag에 class="egov-btn-corner-tl" 속성을 추가하여 왼쪽으로 둥근 탭을 생성할 수 있다. class="egov-btn-corner-tr" 속성을 추가하면 오른쪽으로 둥근 탭을 생성할 수 있다.

eGovFrame

문서 간 이동

문서 간 이동은 활성화 tab의 class="ui-btn-active" 속성을 설정해 주어 사용 가능하다.
문서 간 이동 샘플 보기

문서 내 이동

문서 내 이동은 data-role="tabs" 설정을 통하여 사용 가능하다.
문서 내 이동 샘플 보기

Icon 추가

data-icon="icon" 속성을 사용하여 Tabs에 icon 을 추가 할 수 있다.

footer

Icon 위치 변경

Navbar 항목에 data-iconpos="[top, bottom, right, left]" 속성을 사용하여 Tabs에 표현될 icon 위치를 지정할 수 있다.

footer

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