Skeletabs 소개

스켈레탭스(Skeletabs)는 스켈레톤(skeleton)과 탭스(tabs) 두 단어를 조합해 이름붙여진 jQuery 플러그인으로, 컨텐츠에 탭 브라우징 기능을 부여하며, 접근성 지원, 반응형 사용 및 높은 자유도의 사용자 설정이 가능합니다.

Skeletabs를 사용하면:
  • 기본적으로, 컨텐츠에 탭 내비게이션을 적용 가능합니다.
  • 활성화시킬 기본 탭을 지정할 수 있습니다.
  • 하나 또는 복수 이상의 탭을 비활성화할 수 있습니다.
  • 모든 패널의 높이를 균등하게 만들 수 있습니다.
  • 전체 구조에 나만의 class 이름을 지정할 수 있습니다.
  • 지정한 윈도우 너비 아래에서 아코디언 레이아웃으로 전환 가능합니다.
  • 탐색에 클릭 및 호버 중 하나를 선택해 사용 가능합니다.
  • 키보드 사용자를 위해 키보드 탐색을 활성화 가능합니다.
  • 브라우저 URL의 해시를 갱신 가능합니다.
  • 자동재생 설정을 통해 캐루슬(Carousel)처럼 사용 가능합니다.
  • 전환 동작에 애니메이션을 넣을 수 있습니다. (사용자 설정 가능)
  • 나만의 고유한 함수를 `tabswitch` 이벤트에 바인딩 가능합니다.

무료로 사용 가능한가요?

물론입니다. 이 플러그인은 MIT 허가서의 저작권이 적용되어 있어, 사용시 저작권 표시를 포함시킨다는 조건하에 사용, 편집, 배포 등에 대한 모든 권한을 행사할 수 있습니다.

이 플러그인에 필요한 라이브러리가 있나요?

현재로선 jQuery 라이브러리 이외에는 없습니다. Skeletabs는 jQuery 1.x부터 3.x(각 세트의 최신 버전)까지 두루 테스트되어 있어서, 이 중 하나를 미리 설치하면 그것으로 끝입니다.

인터넷 익스플로러의 어느 버전까지 사용할 수 있나요?

번들된 CSS 및 JS는 IE8 환경에서 동작합니다.

이슈가 있는데 어떤 식으로 제보하죠?

버그 제보 혹은 제안을 위한 공식 채널은 GitHub 리포지토리의 이슈 메뉴입니다. 만약 GitHub 계정을 만들지 않고 제보하고 싶으시다면, 로 메일을 보내주세요.

How to install it?

  1. 패키지를 내려받습니다.
    Skeletabs 내려받기
  2. 즉시 사용 가능한 소스들은 /dist 폴더 안에 있습니다.
  3. HTML에 CSS와 JS를 삽입해 주세요.
    <!DOCTYPE html>
    <html>
        <head>
    
            <link rel="stylesheet" type="text/css" href="스타일시트/경로/skeletabs.min.css" />
        </head>
        <body>
    
            <script type="text/javascript" src="스크립트/경로/skeletabs.min.js"></script>
        </body>
    </html>

주의! IE8을 지원해야 한다면, 압축되지 않은 버전(skeletabs.css & skeletabs.js)을 사용해 주세요. (압축된 코드는 IE8에서 읽지 못할 수 있습니다.)

사용 예시

HTML 구문

<div id="skltbsDefault" class="skltbs">
    <ul role="tablist" class="skltbs-tab-group">
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{1번째 패널의 id}">Tab 1</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{2번째 패널의 id}">Tab 2</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{3번째 패널의 id}">Tab 3</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{4번째 패널의 id}">Tab 4</a>
        </li>
    </ul>
    <div class="skltbs-panel-group">
        <div role="tabpanel" id="{1번째 패널의 ID}" class="skltbs-panel">{1번째 패널}</div>
        <div role="tabpanel" id="{2번째 패널의 ID}" class="skltbs-panel">{2번째 패널}</div>
        <div role="tabpanel" id="{3번째 패널의 ID}" class="skltbs-panel">{3번째 패널}</div>
        <div role="tabpanel" id="{4번째 패널의 ID}" class="skltbs-panel">{4번째 패널}</div>
    </div>
</div>
  • 마크업의 요구사항은 패널의 id입니다. 모든 패널에는 (유니크한) id를 지정하고, 탭이 알맞은 패널로 연결되도록 해야 합니다.
  • 탭에 고유한 id를 넣는 것도 권장됩니다. id를 만들지 않을 경우, Skeletabs가 관련된 패널의 id를 베이스로 탭의 id를 생성합니다.
  • skltbs-로 시작하는 class 이름들은 기본값입니다. classes 설정을 따라 사용자 지정 class 이름을 사용 가능합니다.

기본

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDefault").skeletabs();

기본 탭 변경

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDefaultTabChange").skeletabs({ defaultTab: 2 });

주의! 인덱스값은 0이 아니라 1부터 시작합니다.

탭 비활성화

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDisableTab").skeletabs({ disableTab: 4 });

숫자 배열을 통과시켜 여러 탭을 비활성화 가능합니다.

$("#skltbsDisableTab").skeletabs({ disableTab: [3, 4] });

주의! 인덱스값은 0이 아니라 1부터 시작합니다.

높이 균등 조절

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo similique aliquam consequuntur accusantium perspiciatis earum, odio, mollitia ducimus tempore, et inventore repellat ea soluta! Molestiae ipsam modi error numquam, placeat!

Iure explicabo quia assumenda eaque hic obcaecati, doloremque sunt ipsa est nulla eius veniam inventore, atque possimus molestiae id quis perferendis, vel quaerat unde eum reprehenderit quas nesciunt distinctio. Ipsum.

Repellendus neque debitis velit, natus quibusdam enim, maxime doloremque nihil, fuga, labore optio magnam illum atque aliquam. Nobis numquam, non deserunt, accusamus amet beatae consequuntur animi perspiciatis, placeat voluptate nemo?

Iste doloremque repudiandae facere. Nulla laborum rerum facilis unde temporibus asperiores fugiat distinctio velit dolorum reprehenderit harum libero officiis eaque ullam maiores, ipsam impedit aperiam ex fugit laboriosam numquam illo.

Iusto, fugit laudantium delectus aliquam beatae non dolor, facere nihil expedita provident autem deleniti quidem atque optio eius repudiandae, iure rerum temporibus doloremque at. Corrupti minima sunt sed vel. Nostrum!

Incidunt nam ex ipsa, repudiandae magnam eveniet atque ducimus quo? Nesciunt laboriosam asperiores quaerat placeat explicabo ullam, repellat minus deserunt. Eaque laborum consequatur, cupiditate explicabo natus alias veritatis suscipit minus.

Esse, necessitatibus, non beatae officia quam totam dicta vero ducimus accusamus, dolorum minima praesentium numquam, hic qui ex aliquam debitis iure? Ea voluptas, ipsum voluptatibus beatae blanditiis maiores veniam atque.

$("#skltbsEqualHeights").skeletabs({ equalHeights: true });

반응형 설정

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsResponsive").skeletabs({
    responsive: {
    breakpoint: 800,
    headingTagName: "h4"
});

반응형 설정을 비활성화할 수도 있습니다.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsNonResponsive").skeletabs({ responsive: false });

호버시 전환

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsOnHover").skeletabs({ triggerEvent: "hover" });

추가 키보드 지원 비활성화

방향키와 Home/Key 키 내비게이션 지원을 사용하지 않을 수 있습니다.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDisableExKeyboard").skeletabs({ extendedKeyboard: false });

URL 업데이트 금지

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDisableHashUpdate").skeletabs({ updateUrl: false });

애니메이션 사용

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsAnimated").skeletabs({ animation: "fade-scale" });

애니메이션 종류와 커스터마이징에 대해서는 API 설명서를 읽어 주세요.

자동재생

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsAutoplay").skeletabs({
    autoplay: true,
    autoplayInterval: 4500
});

autoplayInterval 값은 밀리초 단위입니다.

커스텀 이벤트 바인딩

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsCustomEvent").skeletabs().on("tabswitch", function() {
    alert("You are on: #" + $(this).skeletabs("getCurrentPanel").attr("id"));
});

API 설명서

옵션 일람

이름 타입 기본값 설명
animation String null

탭 전환 동작에 지정된 이름의 애니메이션을 사용합니다. 기본으로 "fade", "fade-scale", "drop", "rotate" 값이 지원됩니다. 이 이름은 가장 바깥쪽 컨테이너의 클래스에 추가됩니다.

CSS에서 미리 완성된 커스텀 애니메이션을 적용할 수도 있습니다. 구현 예시는 skeletabs.animation.scss를 참조해 주십시오.

autoplay Boolean false

다음 탭으로 자동으로 넘어갑니다. 사용자가 탭에 포커스를 맞추면 중단합니다. (만약 triggerEvents"hover"로 설정되어 있다면 호버링으로도 중단됩니다.)

autoplayInterval Number 3000

자동재생 동작의 시간차입니다. 밀리초 단위입니다.

classes Object 설명 참조

DOM 요소들의 class명입니다. 이 값은 다음 키, 값을 포함하는 Object입니다.

{
    container: "skltbs",
    tabGroup: "skltbs-tab-group",
    tabItem: "skltbs-tab-item",
    tab: "skltbs-tab",
    panelGroup: "skltbs-panel-group",
    panel: "skltbs-panel",
    accordionHeading: "skltbs-panel-heading",
    isActive: "is-active",
    isDisabled: "is-disabled",
    isGettingIn: "is-getting-in",
    isGettingOut: "is-getting-out",
    hasAnimation: "has-animation"
}
defaultTab Number 1

기본으로 활성화할 탭의 (1부터 시작하는) 인덱스값입니다.

disableTab Number
or
Array
null

비활성화할 탭(들)의 (1부터 시작하는) 인덱스값입니다.

equalHeights Boolean false

모든 컨텐츠 패널의 높이를 가장 높은 패널에 맞춥니다.

extendedKeyboard Boolean true

추가 키보드 내비게이션 기능을 활성화하거나 비활성화합니다.

패널에 있으면, 연결된 탭으로 이동합니다.
탭에 있으면, 연결된 패널로 이동합니다.
다음 탭으로 이동합니다.
이전 탭으로 이동합니다.
Home
첫 번째 탭으로 이동합니다.
End
마지막 탭으로 이동합니다.
responsive Object or null 설명 참조

반응형 설정입니다. 이 값은 다음 키, 값을 포함하는 Object입니다.

{
    breakpoint: 640,
    headingTagName: "h2"
}

Skeletabs는 탭을 복제해 (headingTagName을 사용한 랩핑 요소와 함께) 숨겨진 상태로 각 패널 앞에 추가합니다. 이로 인해 정보창(viewport)의 너비가 breakpoint 값보다 작아지면 탭스의 레이아웃을 즉각 변환할 수 있게 됩니다.

triggerEvent String "click"

전환을 실행하게 하는 이벤트의 이름입니다. "click" 또는 "hover" 값을 사용 가능합니다.

updateUrl Boolean true

사용자가 탭으로 움직일 때 브라우저 URL 해시를 갱신합니다. 사용자가 해시를 포함한 주소로 접근하면(예. //your.sitename/#tab3) 여기에 일치하는 탭 및 패널이 자동적으로 기본 탭이 됩니다.

공개 메소드 일람

Skeletabs는 메소드명을 인자로 전달해 실행할 수 있는 공개 메소드들을 제공합니다.

$("#myTabs").skeletabs("getCurrentTab"); // $("#myTabs .skltbs-panel.is-active"); 를 반환
이름 설명
getCurrentTab

현재 활성화된 탭을 jQuery 객체의 형태로 가져옵니다.

getCurrentPanel

현재 활성화된 패널을 jQuery 객체의 형태로 가져옵니다.

startRotation

수동으로 자동재생을 시작합니다.

stopRotation

수동으로 자동재생을 멈춥니다.