シンクグラフィカ札幌

ResponsiveTab.js

ResponsiveTab.js

レスポンシブWebデザインに最適化されたタブメニューを実現するためのJavascriptです。CSS3のTransitionを使うことでアニメーションを付与したタブメニューも実現ができます。もちろんスマートフォンにも対応。

レスポンシブWebデザインに対応したタブメニュー用のJavascriptです。すべての設定はCSSとHTML側で行い、Javascript側には特に設定項目はありません。head内で該当Javascriptを読み込むだけでOK。

タブ部分はsectionに付けられたtitle属性から自動生成する仕組みになっており、HTMLをクリーンで適正に保ちつつもタブメニューを実現可能な仕様になっております。

Youtube Movie

スマートフォンなどの描画領域の少ないデバイスでタブメニューは効果的な表現方法ですので、レスポンシブWebデザインに対応したResponsiveTab.jsをぜひご利用ください。

ResponsiveTab.jsの機能

ResponsiveTab.jsには以下の機能が盛り込まれております。

headで呼び出すだけですぐ実装可能
head内でスクリプトを呼び出すだけで、該当部分をタブ化します。難しい設定や面倒な設定は一切不要。簡単にタブメニューをPCやスマートフォンに実装することができます。
CSS3によるアニメーションに対応
classNameを変更する仕様のスクリプトのため、CSS3のtransitionに対応しているブラウザであればアニメーションをかけることができます。アニメーションするタブメニューっていいね!
ラベル(タブ)を自動生成
タブメニューのタブの部分を自動生成します。sectionタグのtitle属性を拾ってタブメニュー用のタグをJavascriptから自動的に追加する仕組みのためHTMLタグ内に無駄なタグが生まれません。
IE6などのレガシーブラウザにも対応
IE6などのいわゆるレガシーブラウザにも対応しています。いわゆるプログレッシブ・エンハンスメントってやつですかね。CSS3のTransitionなどは利用できませんが、単純なタブ切り替えとしては動作するので。

ResponsiveTab.jsのデモ

ResponsiveTab.jsのサンプル
まぁ見てみてください。思う存分見るといい。そして楽しむといい。少し休んでから、また見るといい。

ResponsiveTab.jsの更新履歴

2013-11-22ResponsiveTab.jsの公開第1弾。

ResponsiveTab.jsのダウンロード

ResponsiveTab.jsのダウンロード

ResponsiveTab.jsの過去のバージョン

Release Version Download
2013-11-22 1.0.0 Download

ResponsiveTab.jsのユーザレビュー

必須お名前
必須メールアドレス
必須確認のためもう一度
必須評価
必須レビュー内容
必須掲載確認