jQuery Mobile - 페이지 탭

페이지 탭

모바일의 좁은 페이지 공간을 여러 개의 탭 페이지를 선택적으로 브라우징 할 수 있도록 돕는 효율적인 브라우징 인터페이스

* 탭 컨테이너 상위에 data-role="tabs" 속성을 갖는 <div> 태그를 설정하면 된다.

* 탭 컨테이너는 data-role="tabs" 속성을 갖는 <div> 태그 안에 든 태그들이다.

* 탭 은 <a> 태그의 href 속성에 표시 할 페이지 컨테이너의 id를 넣는다. #tabId

* 페이지 컨테이너는 data-role="tabs" 속성을 갖는 <div> 태그 안에 있으면 같은 공간을 공유한다.

 

<div data-role="tabs">
	<div data-role="navbar">
		<ul>
			<li><a href="#tab1">탭1</a></li>
			<li><a href="#tab2">탭2</a></li>
			<li><a href="#tab3">탭3</a></li>
		</ul>
	</div>
	<div id="tab1">
		<h1>첫번째 탭 내용</h1>
	</div>
	<div id="tab2">
		<h1>두번째 탭 내용</h1>
	</div>
	<div id="tab3">
		<h1>세번째 탭 내용</h1>
	</div>
</div>