【jQuery】アニメーション付きタブプラグインEZ Tabs jQuery Plugin

EZ Tabs jQuery Pluginはアニメーション付きのタブを設置できるjQueryプラグインです。
アニメーションはslideUpDown / slideLeftRightの2種類準備されていて、設定は難しくないと思います。

CSS

<link rel="stylesheet" type="text/css" href="css/tabs.css">

JS

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.eztabs.min.js"></script>
<script type="text/javascript">
$(function() {
$('.tabset').eztabs();
});
</script">

Options

tabsList タブとして使用するclassの設定。デフォルトは.ez_tabs
boxContainer タブのコンテンツとして使用するclassの設定。デフォルトは.ez_content
animation アニメーションの種類を設定。slideUpDown / slideLeftRightデフォルトはnone。
animationTime アニメーションの継続時間。デフォルトは500
fullWidthTabs trueにすると利用可能なスペースのタブが100%になります。デフォルトはtrue

HTMLマークアップ

<div class="tabset">
<ul class="ez_tabs">
<li>Description</li>
<li>Delivery</li>
<li>Composition</li>
</ul>
<div class="ez_content">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus  aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui. Nam scelerisque elit vitae lacus gravida, eget sodales nibh faucibus. Nulla elit sapien, molestie in mattis eget, consectetur vitae ipsum. Donec ut placerat magna, ut sodales tortor. Sed quis turpis tincidunt, fringilla felis ut, venenatis nisi. Proin egestas viverra nulla, nec dignissim nisi molestie eget.</p>
</article>
<article>
<ul>
<li>Cotton 80%</li>
<li>Cotton 10%</li>
<li>Elastan 10%</li>
</ul>
</article>
</div>
</div>

ライセンスはMITです。

 

【jQuery】アニメーション付きタブプラグインEZ Tabs jQuery Plugin

  • LATEST
  • RELATED
  • POPULAR