Tabs
탭은 버튼이 수평으로 나열된 형태로 모바일 환경에 최적화된 내비게이션 UI를 제공한다.
Navbar(Tab)는 Header와 Footer 영역에 사용 되며
1~5개 까지 배치 할 수 있고 옵션을 통해 icon 표시가 가능 하다.
기본코드
data-role="navbar" 를 이용하여 내비게이션 기능을 사용하며
ui-btn-active 클래스 값으로 활성화된 탭을 나타낼 수 있다.
- <div data-role="header" data-theme="b">
- <h1>eGovFrame</h1>
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div>
navbar 배치
<li> Tag를 사용하여(1~5개) Navbar 의 배치를 설정 할 수 있다.
Navbar 항목에 <li> Tag를 1개 사용할 경우 브라우져 화면의 100% 너비를 사용한다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- </ul>
- </div>
Navbar 항목에 <li> Tag를 2개 사용할 경우 브라우져 화면의 100%를 1/2 씩 나누어 배치 한다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- </ul>
- </div>
Navbar 항목에 <li> Tag를 3개 사용할 경우 브라우져 화면의 100%를 1/3 씩 나누어 배치 한다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
Navbar 항목에 <li> Tag를 4개 사용할 경우 브라우져 화면의 100%를 1/4 씩 나누어 배치 한다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- </ul>
- </div>
Navbar 항목에 <li> Tag를 5개 사용할 경우 브라우져 화면의 100%를 1/5 씩 나누어 배치 한다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- <li><a href="#">Five</a></li>
- </ul>
- </div>
Navbar 항목에 <li> Tag를 5개 이상 사용할 경우 한 행에 2개열로 구성된 단순한 다중행 형태로 배치 된다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- <li><a href="#">Four</a></li>
- <li><a href="#">Five</a></li>
- <li><a href="#">Six</a></li>
- <li><a href="#">Seven</a></li>
- <li><a href="#">Eight</a></li>
- <li><a href="#">Nine</a></li>
- <li><a href="#">Ten</a></li>
- </ul>
- </div>
형태변경 (둥근 탭)
Navbar 내부의 Anchor Tag에 class="egov-btn-corner-tl" 속성을 추가하여
왼쪽으로 둥근 탭을 생성할 수 있다. class="egov-btn-corner-tr" 속성을 추가하면
오른쪽으로 둥근 탭을 생성할 수 있다.
- <div data-role="header" data-theme="b">
- <h1>eGovFrame</h1>
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="egov-btn-corner-tl">Left</a></li>
- <li><a href="#">Center</a></li>
- <li><a href="#" class="egov-btn-corner-tr">Right</a></li>
- </ul>
- </div>
- </div>
문서 간 이동
문서 간 이동은 활성화 tab의 class="ui-btn-active" 속성을 설정해 주어 사용 가능하다.
문서 간 이동 샘플 보기
- <div data-role="header" data-position="inline" data-theme="b">
- <h1>Mobile FrameWork UX Components</h1>
- <div data-role="navbar">
- <ul>
- <li><a href="#" class="ui-btn-active">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- </div>
문서 내 이동
문서 내 이동은 data-role="tabs" 설정을 통하여 사용 가능하다.
문서 내 이동 샘플 보기
- <div data-role="header" data-position="inline" data-theme="a">
- <h1 class="main">eGovFrame</h1>
- <div data-role="tabs">
- <ul>
- <li><a href="#tab-1" >Tab 1</a></li>
- <li><a href="#tab-2" >Tab 2</a></li>
- <li><a href="#tab-3" >Tab 3</a></li>
- </ul>
- </div>
- </div>
- <div data-role="content">
- <div id="tab-1">
- <h1><font color="red">Here is the first tab</font></h1><br/><br/>
- </div>
- <div id="tab-2">
- <h1><font color="blue">Here is the second tab</font></h1><br/><br/>
- </div>
- <div id="tab-3">
- <h1><font color="green">Here is the third tab</font></h1><br/><br/>
- </div>
- </div>
Icon 추가
data-icon="icon" 속성을 사용하여 Tabs에 icon 을 추가 할 수 있다.
- <div data-role="navbar">
- <ul>
- <li><a href="#" data-icon="grid">Summary</a></li>
- <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
- <li><a href="#" data-icon="gear">Setup</a></li>
- </ul>
- </div>