jQuery

【jQuery】シンプルなタブを実装する軽量のプラグインCardTabs

March 30, 2018
CardTabs

CardTabsはシンプルなタブを実装する軽量のjQueryプラグインです。

Requirements

jQuery 1.2+。jquery.cardtabs.jsjquery.cardtabs.cssをインクルード。

<link rel='stylesheet' href='path/to/jquery.cardtabs.css'>
<script type='text/javascript' src='path/to/jquery.cardtabs.js'></script>

HTML

data-tab属性には名前が含まれている必要があります。

<div class='container'>
    <div data-tab="Tab one">
        /* contents of the first tab...  */
    </div>
    <div data-tab="Tab two">
        /* contents of the second tab...  */
    </div>
    <div data-tab="Tab three">
        /* contents of the third tab...  */
    </div>
</div>

JavaScript

タブを初期化

<script type='text/javascript'>
    $('.container').cardTabs();
</script>

Options

Manualy set the active tab

<div class='active' data-tab='Active tab'></div>

Themes

$('.container').cardTabs({'theme': 'dark'});

Creating themes

テーマは、生成された要素の単一のCSSクラスによって適用されます。

div.card-tabs-bar.yourthemename{ /* the link bar */

}

div.card-tabs-bar.yourthemename a { /* A link in the link bar */

}

div.card-tabs-bar.yourthemename a.active  { /* The active tab link */ 

}

div.card-tabs-stack.yourthemename div[data-tab] { /* The shown tab itself */

}

テーマを次のように読み込むことができます

$('.container').cardTabs({'theme': 'yourthemename'});

MIT