Main menu

jQuery UI 강좌 | Widgets > .tabs()

설명

.tabs()로 제목을 클릭하면 밑에 내용이 바뀌는 탭을 만들 수 있습니다.

문법

$( 'selector' ).tabs( {
  option1: value1,
  option2: value2,
  ...
} );

selector 안의 요소 중 목록(ul)이 제목이 되고, 그 아래 제목을 클릭할 때 나올 내용을 넣습니다. 제목과 내용은 id로 연결합니다.

다른 문법과 다양한 옵션은 http://api.jqueryui.com/tabs/에 있습니다. 아래의 최소한의 옵션을 사용한 간단한 예제입니다.

예제 1

기본값만 사용한 간단한 예제입니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-tabs-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( '#jb-tabs' ).tabs();
      } );
    </script>
  </head>
  <body>
    <div id="jb-tabs">
      <ul>
        <li><a href="#jb-tab-1">Lorem</a></li>
        <li><a href="#jb-tab-2">Ipsum</a></li>
        <li><a href="#jb-tab-3">Dolor</a></li>
      </ul>
      <div id="jb-tab-1">
        <p>Tabs 1 - Lorem</p>
      </div>
      <div id="jb-tab-2">
        <p>Tabs 2 - Ipsum</p>
      </div>
      <div id="jb-tab-3">
        <p>Tabs 3 - Dolor</p>
      </div>
    </div>
  </body>
</html>

예제 2

active 옵션으로 처음 로딩시 보여줄 항목을 정할 수 있습니다. 두번째 항목이 보여지게 하려면 1, 세번째 항목이 보여지게 하려면 2로 설정합니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-tabs-02.html

$( '#jb-tabs' ).tabs( {
  active: 1,
} );

예제 3

disabled 옵션으로 특정 항목을 비활성화 시킬 수 있습니다. 예를 들어 두번째와 네번째 항목을 비활성화시키려면 다음과 같이 합니다.

disabled: [ 1, 3 ]

다음은 세번째 항목을 비활성화시킨 예제입니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-tabs-03.html

$( '#jb-tabs' ).tabs( {
  disabled: [ 2 ],
} );

Created on 2015-10-16 | Updated on 2015-10-16

이 글을 공유하기

Kakao