우선 하단 그림처럼 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로 불러오는 것도 있는데 해당부분은 데모샘플을 보면서 하도록 하자~
정렬순서를 바꾸고싶다면 jQueryUI의 드래그앤드롭기능을 이용하자 (0) | 2014.06.20 |
---|---|
jQueryUI tooltip함수를 이용하여 영역에 포커스 발생시 말풍선을 띄우기 (0) | 2014.06.20 |
모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 제공하는 Accordion을 이용해보자 (0) | 2014.06.20 |
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기 (0) | 2014.06.19 |