jQueryUI의 탭기능을 이용하여 컨텐츠를 나눠보도록 해보자

우선 하단 그림처럼 2개의 탭을 생성후 

각각의 영역에 컨텐츠 내용을 삽입한다 가정해보도록 하자

HTML 코드

<div id="tabs">
	<ul>
		<li><a href="#tab-1">첫번째탭</a></li>
		<li><a href="#tab-2">두번째탭</a></li>
		<li><a href="#tab-3">세번째탭</a></li>
	</ul>
	<div id="tab-1">첫번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용번째 탭내용</div>
	<div id="tab-2">두번째 탭내용</div>
	<div id="tab-3">세번째 탭내용</div>
</div>

위 구조로 탭이 구성되어진다

타이틀에 해당하는 부분은 div > ul > li영역에 속하는 태그이고

컨텐츠에 해당되는 부분들은 div -> div로 되있는 태그이다.

연결점은 어떻게 잡는가?

타이틀에 보면 <a href="#tab-1"> <<< 이부분이 있는데 a 태그의 <a href="#탭컨텐츠 id"> 값으로 맵핑이 되는거 같다.

해당 구조대로 html코드를 완료하였으면 스크립트 코드도 작성해보도록 하자 .

역시, 기본 코드는 한줄이면 된다.

스크립트 코드

$(function(){
		$( "#tabs" ).tabs();
})

위처럼 호출을하면 tabUI 적용이 완료!!

ID가 tabs인 영역은 탭 타이틀과 컨텐츠 타이틀을 동시에 감싸는 부모 태그의 id를 의미

한다.

실행결과

어우~ 내가 만든 테마는 너무 눈이 어지럽다 .... 3D화면 같네;;; 

ajax로 불러오는 것도 있는데 해당부분은 데모샘플을 보면서 하도록 하자~