Skeletabs

Skeletabs란

Skeletabs(스켈레탭스)는 컨텐츠에 탭 브라우징 기능을 부여해 주는 오픈 소스 jQuery 플러그인입니다. Skeletabs는 무엇보다도 접근성과 확장성을 중시하는 도구로, 스크린 리더와 키보드 사용자의 편의를 생각하며 개발자의 창의적인 응용을 장려하도록 만들어지고 있습니다.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore magni sapiente deleniti, vel veniam molestias dolor minima esse voluptatibus totam molestiae cum fugit blanditiis beatae, itaque maiores iusto, consectetur asperiores!

Ad assumenda totam provident quae facilis molestiae porro dolore, ab quod, commodi accusamus dignissimos repudiandae? Dolore tenetur, veniam illo recusandae deserunt itaque quas maiores saepe ipsa iste nesciunt, magni doloribus!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusantium iure, esse ratione ipsum laborum inventore consequuntur, dignissimos dolore perspiciatis alias aspernatur culpa. Ducimus saepe aliquid repudiandae quibusdam numquam dolor!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum voluptate quo ea commodi totam aut aliquam quasi, corrupti nulla, eligendi ullam quas deserunt, sequi praesentium tempore quidem dolor. Sequi, voluptatum.

Quo dolor laudantium recusandae quod ullam iure tempora sint voluptates, molestiae nobis quisquam, eligendi dolore enim harum magnam. Unde assumenda sunt fuga aliquid laboriosam, delectus et deserunt inventore fugit ea.

Optio tempore sunt nostrum repellat temporibus architecto inventore amet labore et quo. Molestias et similique, illum autem repudiandae maiores tempora at possimus inventore amet deleniti nisi sunt? Adipisci, dolorum rem!

지원하는 브라우저

Skeletabs는 ECMAScript 5를 지원하는 모든 브라우저에서 올바르게 작동합니다. 압축된 소스 코드를 해석할 수 없는 IE 8 및 그 이하 버전은 지원하지 않습니다.

어느 버전의 jQuery가 필요한가요?

1.7.0 이상의 버전에서 사용 가능합니다. (3.x 이상에서 제공되는 slim 버전은 사용할 수 없습니다.)

시작하기

최신 패키지 받기

최신 버전의 Skeletabs를 다운로드해 주세요. 바로 사용 가능한 리소스는 /dist 경로에서 찾을 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="skeletabs.css" />
  </head>
  <body>
    <script src="jquery.js"></script>
    <script src="skeletabs.js"></script>
  </body>
</html>

다운받은 리소스를 위와 같이 삽입해 주세요.
jQuery는 Skeletabs보다 먼저 불러져야 합니다.
CSS 파일은 주관적인 디자인과 애니메이션 효과를 포함하고 있습니다. 커스텀 디자인을 사용하고자 할 경우, CSS는 삽입하지 않아도 됩니다.

HTML

Skeletabs는 class를 토대로 HTML 구조를 해석합니다. 트리 안의 각 엘리먼트에 알맞은 class를 할당해 주세요.

<div><!-- container -->
  <ul class="skltbs-tab-group"><!-- tabGroup -->
    <li class="skltbs-tab-item"><!-- tabItem -->
      <button class="skltbs-tab">{{탭 1}}</button><!-- tab -->
    </li>
    <li class="skltbs-tab-item">
      <button class="skltbs-tab">{{탭 2}}</button>
    </li>
  </ul>
  <div class="skltbs-panel-group"><!-- panelGroup -->
    <div class="skltbs-panel">{{패널 1}}</div><!-- panel -->
    <div class="skltbs-panel">{{패널 2}}</div>
  </div>
</div>

웹 접근성을 위해 모든 tab 및 panel에는 id가 자동적으로 추가됩니다. (이미 id가 있을 경우 해당 id를 유지합니다.)

<div class="skltbs-panel-group">
  <div class="wrapper">
    <div class="another-wrapper">
      <div class="skltbs-panel">{{패널 1}}</div>
      <div class="skltbs-panel">{{패널 2}}</div>
    </div>
  </div>
</div>

panelGroup과 panel 사이에는 다른 엘리먼트가 존재할 수 있습니다. 단, panel들이 이웃하도록 배치해 주세요.

CSS

플러그인 안에는 light / dark 2개의 기본 테마를 포함되어 있습니다. 컨테이너 엘리먼트에 skltbs-theme-가 접두된 CSS class를 추가해서 테마를 활성화할 수 있습니다.

<!-- container -->
<div class="skltbs-theme-light">...</div>

애니메이션은 fade / fade-toggle / drop / rotate 4가지가 제공되며, use-가 접두된 class를 통해 사용 가능합니다.

<!-- container -->
<div class="skltbs-theme-light use-fade">...</div>

보다 자세한 정보는 테마 그리고 애니메이션 효과 섹션을 읽어주세요.

JS

DOM이 준비된 후, 다음과 같이 Skeletabs를 활성화해 주세요.

$('#container').skeletabs();

사용자 옵션은 다음과 같이 설정 가능합니다.

$('#container').skeletabs({
  startIndex: 2
});

JS 없이 자동 활성화

위에 소개된 JS 부분을 생략하고, 컨테이너 엘리먼트에 data-skeletabs 속성을 사용해 Skeletabs를 활성화시킬 수 있습니다.

<!-- container -->
<div data-skeletabs>...</div>

옵션은 다음과 같이 data-skeletabs 속성에 JSON 객체를 사용해 전달할 수 있습니다.

<!-- container -->
<div data-skeletabs='{ "autoplay": true, "panelHeight": "adaptive" }'>...</div>

CSS 클래스는 data-skeletabs-class 속성을 통해 전달할 수 있습니다.

<!-- container -->
<div data-skeletabs-class='{ "panelGroup": "content", "panel": "section" }'>...</div>

JSON 객체 — 객체의 키에 맞는 클래스명을 변경합니다.
문자열 — skltbs 접두어를 대체합니다.

<!-- container -->
<div data-skeletabs-class="myprefix">...</div>

옵션, 클래스 커스터마이징에 관한 상세한 정보는 옵션 항목을 읽어주세요.

예시

다음은 주요 옵션을 적용한 코드 레시피입니다. 이 밖에 더 많은 설정을 확인하려면 옵션 항목을 확인해 주세요.

기본

$('#container').skeletabs();

시작 패널 변경

$('#container').skeletabs({ startIndex: -1 });

패널 비활성화

startIndex 값이 disabledIndex에 해당할 경우, 선택 가능한 다음 인덱스에서 시작하게 됩니다. 아래 예시도 기본값인 0번 인덱스가 비활성화되어 있어, 시작 인덱스가 1번으로 변경되었습니다.

$('#container').skeletabs({ disabledIndex: [0, 3] });

마우스오버에 반응

$('#container').skeletabs({ selectEvent: "hover" });

패널 높이 균일화

$('#container').skeletabs({ panelHeight: 'adapt' });

동적으로 갱신되는 패널 높이

$('#container').skeletabs({ panelHeight: 'adaptive' });

반응형 레이아웃 사용하지 않음

$('#container').skeletabs({ breakpoint: 0 });

반응형 분기점 이하에서 비활성화

$('#container').skeletabs({ breakpointLayout: "destroy" });

아코디언 세부설정

1200px 이하에서 아코디언으로 변경
아코디언 헤딩에 <header /> 엘리먼트 사용
아코디언에 슬라이드 효과 사용

$('#container').skeletabs({ breakpoint: 1200, slidingAccordion: true });

자동재생

$('#container').skeletabs({
  autoplay: true,
  autoplayInterval: 5000
});

수동형 키보드 내비게이션

방향키를 눌렀을 때 포커스만 이동시키고, Enter 또는 Space를 눌렀을 때 해당 탭을 활성화시킵니다.

$('#container').skeletabs({
    keyboard: 'focus'
  });

레이아웃 업데이트 감도 조절

resizeTimeout를 사용 하면 창의 너비가 바뀔 때 레이아웃이 변경되는 반응속도를 조절할 수 있습니다. 탭스와 아코디언 전환, 그리고 panelHeight 설정에 영향을 줍니다. (창 크기를 조절하면서 확인해 보세요.)

숫자를 낮게 잡을 수록 업데이트가 빨라지며, 숫자를 높게 잡을 수록 Reflow가 발생하는 빈도가 줄어들어 쾌적해집니다.

$('#container').skeletabs({ resizeTimeout: 500, panelHeight: 'equal' });

URL 해시 변경

history 설정은 패널 사이를 이동할 때 주소 창에 해시를 변경할 것인지를 결정합니다. 기본값은 'replace'이며 해시를 변경해 주고, 'push'로 설정하면 해시를 변경한 후 뒤로가기 기능을 사용할 수 있게 해 줍니다.

해시 변경을 원하지 않는다면 false를 사용하면 됩니다.

$('#container').skeletabs({ history: 'push' });

옵션

Skeletabs는 옵션, 클래스 2개의 매개변수를 허용합니다.

$(selector).skeletabs(options, classNames);

사용자 옵션

다음은 사용자 옵션 기본값입니다.

{
  autoplay: false,
  autoplayInterval: 3000,
  breakpoint: 640,
  breakpointLayout: 'accordion',
  disabledIndex: null,
  history: 'replace', // 'replace' | 'push' | false
  keyboard: 'select', // 'select' | 'focus' | false
  keyboardAccordion: 'vertical',
  keyboardTabs: 'horizontal',
  panelHeight: 'auto', // 'auto' | 'equal' | 'adaptive'
  pauseOnFocus: true,
  pauseOnHover: false,
  resizeTimeout: 100,
  selectEvent: 'click', // 'click' | 'hover'
  slidingAccordion: true,
  startIndex: 0,
  transitionDuration: 500,
}

키	타입	기본값	설명
autoplay	`boolean`	`false`	일정 주기마다 다음 탭으로 넘어갈 것인지를 나타냅니다.
autoplayInterval	`number`	`3000`	autoplay를 실행할 주기를 나타냅니다. (밀리세컨드 단위)
breakpoint	`number`	`640`	뷰포트 너비가 이 지점 이하가 되면 대체 레이아웃을 사용합니다. (px 단위) `0`을 입력하면 대체 레이아웃을 사용하지 않습니다. `100000`처럼 비현실적으로 큰 단위를 입력하면 사실상 늘 대체 레이아웃을 사용합니다.
breakpointLayout	`'accordion'` `'destroy'`	`'accordion'`	위 반응형 분기점 이하에서 사용할 대체 레이아웃의 유형을 나타냅니다. `'accordion'` — 아코디언 레이아웃을 사용합니다. `'destroy'` — Skeletabs를 비활성화합니다. (뷰포트 크기가 바뀌어 다시 주 레이아웃 영역으로 돌아가면 재활성화합니다.)
disabledIndex	`number` `array`	`null`	비활성화할 탭의 인덱스를 나타냅니다. 배열을 사용해 복수 이상의 대상을 비활성화 가능합니다.
history	`'replace'` `'push'` `false`	`'replace'`	탭을 선택했을 때 History API를 사용해 URL의 해시를 변경하는 방법을 나타냅니다. `'replace'` — URL 해시만 변경합니다. `'push'` — URL 해시를 변경하고, 뒤로가기를 눌렀을 때 이전 탭으로 이동합니다. History API를 지원하는 브라우저에서만 작동합니다. `false` — 해시를 업데이트하지 않습니다.
keyboard	`'select'` `'focus'` `false`	`'select'`	키보드를 사용해 탭 사이를 이동할지 여부를 나타냅니다. `↑` — 세로 레이아웃에서 이전 탭으로 이동합니다. `↓` — 세로 레이아웃에서 다음 탭으로 이동합니다. `←` — 가로 레이아웃에서 이전 탭으로 이동합니다. `→` — 가로 레이아웃에서 다음 탭으로 이동합니다. `Home` — 첫 탭으로 이동합니다. `End` — 마지막 탭으로 이동합니다. 다음 값을 사용 가능합니다. `'select'` — 대상 탭으로 이동합니다. `'focus'` — 대상 탭에 포커스만 부여하고, `Enter` 또는 `Space` 키를 누르면 이동합니다. `false` — 키보드 입력에 반응하지 않습니다.
keyboardTabs	`'horizontal'` `'vertical'`	`'horizontal'`	탭스 모드에서 어느 방향키에 반응할지를 나타냅니다.
keyboardAccordion	`'horizontal'` `'vertical'`	`'vertical'`	아코디언 모드에서 어느 방향키에 반응할지를 나타냅니다.
panelHeight	`'auto'` `'equal'` `'adaptive'`	`'auto'`	패널 그룹의 높이를 나타냅니다. `'auto'` — 높이를 조정하지 않습니다. `'equal'` — 모든 패널의 높이를 가장 높은 것에 균일하게 맞춥니다. `'adaptive'` — 현재 패널의 높이에 정확하게 맞춥니다.
pauseOnFocus	`boolean`	`true`	포커스를 받았을 때 자동재생 상태를 일시정지합니다. 포커스를 잃으면 자동재생을 재개합니다.
pauseOnHover	`boolean`	`false`	마우스 포인터를 올렸을 때 자동재생 상태를 일시정지합니다. 마우스 포인터가 떠나면 자동재생을 재개합니다.
resizeTimeout	`number`	`100`	뷰포트 너비가 바뀔 때, 레이아웃을 업데이트하는 반응속도를 나타냅니다. (밀리세컨드 단위) 아코디언 모드와 `panelHeight` 옵션에 영향을 줍니다.
selectEvent	`'click'` `'hover'`	`'click'`	탭을 선택하는 이벤트의 종류를 나타냅니다. 마우스오버에 반응하게 하려면 `'hover'`를 사용합니다.
slidingAccordion	`boolean`	`false`	아코디언 패널을 펼치거나 접을 때 슬라이드 애니메이션을 사용할지 여부를 나타냅니다.
startIndex	`number`	`0`	시작시 활성화될 패널의 인덱스를 나타냅니다. 음수로 뒤에서부터 선택 가능합니다. (`-1`은 마지막 패널)
transitionDuration	`number`	`500`	CSS transition의 지속시간을 나타냅니다. (밀리세컨드 단위) enterActive, leaveActive 클래스가 지속되는 시간 및 accordion의 slideEffect 속도에 영향을 줍니다.

CSS class 설정

키	기본값	설명
tabGroup	`'skltbs-tab-group'`	탭을 묶는 `ul` 엘리먼트
tabItem	`'skltbs-tab-item'`	tabGroup의 자녀 `li` 엘리먼트
tab	`'skltbs-tab'`	tabItem의 자녀 `button` 엘리먼트
panelGroup	`'skltbs-panel-group'`	패널을 묶는 엘리먼트 (패널의 직속 부모일 필요는 없습니다.)
panel	`'skltbs-panel'`	panelGroup에 속한 패널 엘리먼트
panelHeading	`'skltbs-panel-heading'`	아코디언 모드에서 탭을 감싸도록 동적 생성되는 엘리먼트
init	`'skltbs-init'`	Skeletabs가 활성화되었을 때 컨테이너에 추가되는 클래스
tabsMode	`'skltbs-mode-tabs'`	탭스 모드일 때 컨테이너에 추가되는 클래스
accordionMode	`'skltbs-mode-accordion'`	아코디언 모드일 때 컨테이너에 추가되는 클래스
active	`'skltbs-active'`	현재 가리키는 tabItem, tab, panel에 추가되는 클래스
disabled	`'skltbs-disabled'`	비활성 tabItem, tab, panel에 추가되는 클래스
enter	`'skltbs-enter'`	보여지는 패널에 추가되는 클래스. 이 클래스에 CSS transition의 시작 상태를 정의합니다.
enterActive	`'skltbs-enter-active'`	보여지는 패널의 transition 주기 처음에 추가되는 클래스. 이 클래스에 CSS transition의 종료 상태를 정의합니다.
enterDone	`'skltbs-enter-done'`	보여지는 패널의 transition 주기 끝에 추가되는 클래스
leave	`'skltbs-leave'`	숨겨지는 패널에 추가되는 클래스. 이 클래스에 CSS transition의 시작 상태를 정의합니다.
leaveActive	`'skltbs-leave-active'`	숨겨지는 패널에 추가되는 클래스. 이 클래스에 CSS transition의 종료 상태를 정의합니다.
leaveDone	`'skltbs-leave-done'`	숨겨지는 패널의 transition 주기 처음에 추가되는 클래스.

기본값 설정하기

모든 인스턴스에 공통 적용되는 옵션을 다음과 같이 설정할 수 있습니다.

$.skeletabs.setDefaults({
  autoplay: true,
  pauseOnHover: true
});

비슷한 방식으로 CSS class도 기본값을 설정할 수 있습니다. 문자열을 사용하면 모든 'skltbs' 접두를 다른 접두어로 일괄적으로 바꿀 수 있고, 객체를 사용하면 각 class를 세부 설정할 수 있습니다.

$.skeletabs.setClassNames('my');

$.skeletabs.setClassNames({
  tabGroup: 'nav',
  tabItem: 'nav-item',
  tab: 'nav-link',
  panelGroup: 'panel-container',
  panel: 'panel',
  panelHeading: 'panel-heading'
});

기본값 설정은 .skeletabs();로 인스턴스를 생성하기 전에 이루어져야 합니다. 도중에 선언될 경우, 그 이후에 생성된 인스턴스에만 변경된 설정이 적용됩니다.

메소드

Skeletabs를 활성화한 엘리먼트에 여러 유용한 메소드를 사용할 수 있습니다.

$(selector).skeletabs('method', [, arguments...]);

메소드를 사용하려면 그 전에 Skeletabs를 한 번 활성화해야 합니다. 다음은 예시입니다.

// skeletabs를 자동재생 옵션과 함께 활성화
$('#container').skeletabs({ autoplay: true });
// stop 버튼을 누르면 자동재생을 중지
$('#stopButton').click(function() {
  $('#container').skeletabs('pause');
});

destroy

Skeletabs에 의해 변경된 부분을 이전 상태로 되돌리고, 이벤트 리스너를 제거하고, 인스턴스의 참조를 삭제합니다.

$('#container').skeletabs('destroy');

reload

구성하는 엘리먼트들의 사이즈를 다시 계산하고, 필요에 따라 레이아웃 또는 패널의 크기를 재조정합니다. 복잡한 구조의 페이지에서 업데이트를 수동으로 제어하고자 할 때 유용합니다.

goTo

@param index number — 이동할 대상 패널의 인덱스

// 3번째 패널로 이동
$('#container').skeletabs('goTo', 2);
// URL 해시에 맞는 패널이 있을 경우, 해당 패널로 이동
$('#container').skeletabs('goTo', window.location.hash);

주어진 인덱스를 가진 패널로 이동합니다. 만약 대상 인덱스가 disabledIndex 옵션에 의해 비활성화되어 있다면, 아무 반응도 하지 않습니다.

number: 대상 패널의 인덱스를 입력 가능합니다. 음수 인덱스를 이용하면 뒤에서부터 거꾸로 선택할 수 있습니다. (-1은 마지막 인덱스)
string: 대상 패널의 id에 맞는 해시를 입력 가능합니다. 이 방법은 탭스를 해시 갱신과 동기화하고자 할 때 유용합니다.

다음 패널로 이동합니다. 다음 인덱스가 비활성화되어 있다면, 가장 가까운 다음 활성 패널로 이동합니다. 다음 활성 패널이 없다면, 아무 반응도 하지 않습니다.

이전 패널로 이동합니다. 이전 인덱스가 비활성화되어 있다면, 가장 가까운 이전 활성 패널로 이동합니다. 이전 활성 패널이 없다면, 아무 반응도 하지 않습니다.

add

@param data object
- tab string — 탭 내용이 될 HTML 문자열
- panel string — 패널 내용이 될 HTML 문자열

새로운 탭/패널을 추가합니다.

$('#container').skeletabs('add', {
  tab: '새 탭',
  panel: '<p><strong>새 탭</strong>을 추가했습니다.</p>'
});

remove

@param index number — 제거할 대상 인덱스

주어진 인덱스를 가진 탭/패널을 제거합니다. 음수 인덱스를 이용해 뒤에서부터 거꾸로 선택할 수 있습니다.

$('#container').skeletabs('remove', -1);

play

일정 주기마다 자동으로 다음 패널로 이동합니다. (자동재생 주기는 autoplayInterval 옵션값을 사용해 지정 가능합니다.)

pause

자동으로 다음 패널로 이동하던 동작을 중지합니다.

getCurrentInfo

@returns info object
- $container jQuery.Element — 컨테이너 엘리먼트
- $currentPanel jQuery.Element — 현재 활성화된 탭 엘리먼트
- $currentTab jQuery.Element — 현재 활성화된 패널 엘리먼트
- $panels jQuery.Element — 패널 엘리먼트 모음
- $tabs jQuery.Element — 탭 엘리먼트 모음
- currentIndex number — 현재 활성화된 인덱스
- currentLayout string — 현재 사용중인 레이아웃 ('tabs' 또는 'accordion')
- size number — 패널의 갯수

Skeletabs 인스턴스의 주요 정보를 반환합니다.

// Skeletabs를 활성화
$('#container').skeletabs();
// currentIndex 정보를 로그에 출력
var info = $('#container').skeletabs('getCurrentInfo');
console.log(info.currentIndex); // 0

이벤트

Skeletabs가 발생시키는 jQuery 이벤트를 통해 커스텀 콜백을 등록할 수 있습니다. 모든 이벤트는 skeletabs:가 접두되어 있으며, 컨테이너 엘리먼트에서 발생합니다.

$('#container')
  .on('skeletabs:init', function(event, info) {
    // 초기화가 완료되면...
  })
  .on('skeletabs:layoutchange', function(event, info) {
    // 레이아웃이 탭 <-> 아코디언 사이에서 전환하면...
  })
  .skeletabs(); // 초기화

모든 콜백은 기본적으로 다음 매개변수를 전달합니다.

@param event jQuery.Event — jQuery 이벤트 객체
@param info object
- $container jQuery.Element — 컨테이너 엘리먼트
- $currentPanel jQuery.Element — 현재 활성화된 탭 엘리먼트
- $currentTab jQuery.Element — 현재 활성화된 패널 엘리먼트
- $panels jQuery.Element — 패널 엘리먼트 모음
- $tabs jQuery.Element — 탭 엘리먼트 모음
- currentIndex number — 현재 활성화된 인덱스
- currentLayout string — 현재 사용중인 레이아웃 ('tabs' 또는 'accordion')
- size number — 패널의 갯수

추가 매개변수를 전달하는 이벤트는 따로 명시되어 있습니다.

skeletabs:init

초기화(init)를 마쳤을 때 발생하는 이벤트입니다. 이벤트가 발생하지 않는다면, 이벤트 핸들러를 .skeletabs(); 호출 전에 추가했는지 점검해 보세요.

skeletabs:move

@param event jQuery.Event — jQuery 이벤트 객체
@param info object
- $container jQuery.Element — 컨테이너 엘리먼트
- $currentPanel jQuery.Element — 현재 활성화된 패널 엘리먼트
- $currentTab jQuery.Element — 현재 활성화된 탭 엘리먼트
- $nextTab jQuery.Element — 이동할 다음 패널 엘리먼트
- $nextPanel jQuery.Element — 이동할 다음 탭 엘리먼트
- currentIndex number — 현재 활성화된 인덱스
- nextIndex number — 이동할 다음 인덱스
- size number — 패널의 갯수

다른 탭으로 이동하기 전에 발생하는 이벤트입니다. goTo() 메소드를 호출했을 때 비활성 탭 등의 이유로 이동이 일어나지 않으면 이벤트도 발생하지 않습니다.

skeletabs:moved

@param event jQuery.Event — jQuery 이벤트 객체
@param info object
- $container jQuery.Element — 컨테이너 엘리먼트
- $currentPanel jQuery.Element — 현재 활성화된 패널 엘리먼트
- $currentTab jQuery.Element — 현재 활성화된 탭 엘리먼트
- $previousTab jQuery.Element — 이동하기 전 패널 엘리먼트
- $previousPanel jQuery.Element — 이동하기 전 탭 엘리먼트
- currentIndex number — 현재 활성화된 인덱스
- previousIndex number — 이동하기 전 인덱스
- size number — 패널의 갯수

다른 탭으로 이동을 완료한 후에 발생하는 이벤트입니다. goTo() 메소드 등을 실행했을 때 비활성 탭 등의 이유로 이동이 일어나지 않으면 이벤트도 발생하지 않습니다.

skeletabs:layoutchange

탭스와 아코디언 모드 사이에서 레이아웃 변경이 일어날 때 발생하는 이벤트입니다. .skeletabs({ accordion: false });처럼 아코디언을 사용하지 않은 경우 발생하지 않습니다.

테마

skeletabs.css 파일에는 2가지 기본 테마가 포함되어 있습니다. 컨테이너에 skltbs-theme-로 시작하는 class를 알맞게 추가하면 테마가 적용됩니다.

<div class="skltbs-theme-light"></div>

Skeletabs 패널 안에 다른 Skeletabs를 중첩해서 사용할 경우, CSS의 상속되는 성질에 의해 바깥쪽의 테마가 안쪽에게 영향을 미칩니다. 다르게 말하면, 중첩된 구조에서는 바깥쪽 컨테이너에만 class를 추가하면 됩니다.

skltbs-theme-light

skltbs-theme-dark

애니메이션 효과

skeletabs.css 파일에는 4가지 기본 애니메이션이 포함되어 있습니다. 컨테이너에 use-로 시작하는 class를 알맞게 추가하면 효과가 적용됩니다.

<div class="skltbs use-fade"></div>

fade

fade-scale

drop

rotate

나만의 애니메이션 효과 만들기

다음은 fade 효과를 작성한 CSS입니다. 오리지널 효과를 만들 때 참조해 보세요.

/* panel group */
.skltbs-mode-tabs.use-fade .skltbs-panel-group {
  position: relative;
}
/* all panels */
.skltbs-mode-tabs.use-fade .skltbs-panel {
  transition: opacity 500ms;
}
/* hiding panel's initial state */
.skltbs-mode-tabs.use-fade .skltbs-leave {
  position: absolute;
  top: 0;
  /* override `display: none;` added by JS */
  display: block !important;
  opacity: 1;
}
/* hiding panel's target state */
.skltbs-mode-tabs.use-fade .skltbs-leave-active {
  opacity: 0;
}
/* showing panel's initial state */
.skltbs-mode-tabs.use-fade .skltbs-enter {
  position: relative;
  opacity: 0;
}
/* showing panel's target state */
.skltbs-mode-tabs.use-fade .skltab-active {
  opacity: 1;
}

Transition의 기본 지속시간은 500ms입니다. 지속시간을 변경하려고 할 경우, CSS에 입력한 값을 .skeletabs({ transtionDuration: 800 });처럼 옵션으로도 전달해 주어야 합니다.

자주 있는 질문

궁금해하던 부분에 대해 답이 되었나요? 다른 문제를 겪고 있다면, GitHub 이슈를 이용해 보세요.

Skeletabs는 add와 remove 메소드를 통해 새 패널을 추가하거나 기존 패널을 삭제할 수 있도록 지원합니다.

// 맨 끝에 새 패널을 추가
$('#container').skeletabs('add', {
  tab: '새 탭',
  panel: '<p><strong>새 탭</strong>을 추가했습니다.</p>'
});

// 마지막 패널을 제거
$('#container').skeletabs('remove', -1);

goTo 메소드에 해시 문자열을 내보내면, 매칭하는 패널로 이동합니다. 다음은 이 사이트를 구성하고 있는 예제 스크립트입니다.

$(document).on('click', 'a[href^="#"]', function (event) {
  var hash = $(anchor).attr('href');
  if (history && history.pushState) {
    history.pushState({ hash: hash }, null, hash);
  } else {
    location.hash = hash;
  }
  $('#page').skeletabs('goTo', hash);
  event.preventDefault();
});

Skeletabs 안에 다른 Skeletabs를 생성하셨나요? 만약 그렇다면, 안쪽 인스턴스가 이벤트 버블링을 일으켜 바깥쪽 인스턴스에도 이벤트를 전달하게 됩니다. 이와 같은 경우, 안쪽 인스턴스에 event.stopPropagation();을 사용하면 버블링을 멈출 수 있습니다.

$('#inner').on('skeletabs:moved', function(event) {
  // 안쪽 Skeletabs가 움직일 때 이벤트 버블링을 막음
  event.stopPropagation();
});
$('#outer').on('skeletabs:moved', function(event) {
  // 바깥쪽 Skeletabs가 움직임을 완료했을 때...
});

Skeletabs란

지원하는 브라우저

어느 버전의 jQuery가 필요한가요?

시작하기

HTML

CSS

JS

JS 없이 자동 활성화

예시

기본

시작 패널 변경

패널 비활성화

마우스오버에 반응

패널 높이 균일화

동적으로 갱신되는 패널 높이

반응형 레이아웃 사용하지 않음

반응형 분기점 이하에서 비활성화

아코디언 세부설정

자동재생

수동형 키보드 내비게이션

레이아웃 업데이트 감도 조절

URL 해시 변경

옵션

사용자 옵션

CSS class 설정

기본값 설정하기

메소드

destroy

reload

goTo

next

prev

add

remove

play

pause

getCurrentInfo

이벤트

skeletabs:init

skeletabs:move

skeletabs:moved

skeletabs:layoutchange

테마

skltbs-theme-light

skltbs-theme-dark

애니메이션 효과

fade

fade-scale

drop

rotate

나만의 애니메이션 효과 만들기

자주 있는 질문