【jQuery】レスポンシブでカスタマイズ可能なタブSkeletabs

jQuery

Skeletabs

March 15, 2017

Skeletabsはスケルトンとタブという単語の組み合わせから派生した名前のスケルトンタブ。アクセシビリティでレスポンシブ、タブ機能と高いカスタマイズ性をコンテンツに与えるjQueryプラグイン。

install

CSSとJSをHTMLに挿入

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" type="text/css" href="PATH/TO/STYLESHEET/skeletabs.css" />
    </head>
    <body>

        <script type="text/javascript" src="PATH/TO/SCRIPT/skeletabs.js"></script>
    </body>
</html>

HTML Syntax

すべてのパネルにIDを与え、タブとパネルが一致する必要があります。

<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="#{1st panel's id}">Tab 1</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{2nd panel's id}">Tab 2</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{3rd panel's id}">Tab 3</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{4th panel's id}">Tab 4</a>
        </li>
    </ul>
    <div class="skltbs-panel-group">
        <div role="tabpanel" id="{1st panel's id}" class="skltbs-panel">{1st panel}</div>
        <div role="tabpanel" id="{2nd panel's id}" class="skltbs-panel">{2nd panel}</div>
        <div role="tabpanel" id="{3rd panel's id}" class="skltbs-panel">{3rd panel}</div>
        <div role="tabpanel" id="{4th panel's id}" class="skltbs-panel">{4th panel}</div>
    </div>
</div>

Default

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

Default tab change

デフォルトのタブを変更

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

その他にもAPIがあります。

MIT

Latest Posts

Related Posts