[JS]タブの機能性のみを追求したフレキシブルな超軽量スクリプト -EasyTabs
Post on:2011年4月1日
スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。

JQuery EasyTabs Plugin
デモページ:同じページに複数のタブを設置
[ad#ad-2]
EasyTabsの主な特徴
- タブの切り替え時にはスムーズなアニメーションが可能
- 外観はCSSで簡単にカスタマイズ可能
- ブラウザのバックボタンとフォワードボタンに対応
- 各タブは#リンクが有効でブックマークが可能(SEOにフレンドリー)
- タブは指定された時間で自動切り替え可能
- グローバル変数の使用はしていません
- ページ内に複数のタブコンテンツを設置可能
- valid HTML Markup
- 超軽量(5KB)
- オープンソース(MIT and GPL licenses)
- タブのスタイリングはCSSでもJavaScriptでも可能
- AJAXコンテンツにも対応
[ad#ad-2]
EasyTabsのデモ
デモは複数用意されていますが、どれもリッチなデザインは適用されていないシンプルなものとなっています。

デモページ:同じページに複数のタブを設置:通常のタブ(アニメーション付き)

デモページ:同じページに複数のタブを設置:自動切り替えのタブ(アニメーション付き)

また、タブとコンテンツを切り離して、設置することも可能です。
※間に他のコンテンツの設置も可能です。

sponsors