タブ切り替え機能を簡単に「Tabber」
WindowsやMac OSXなどのOSで見慣れているので、Webサイトの画面をタブで切り替えるようにするインタフェースを採用している所は多い。単純にリンクだけであれば難しいものではないだろう。
だが、JavaScriptを使って、画面遷移無しに切り替えて欲しいと言われたらどうしよう。一から作るか…いや、そんな必要はない。
今回紹介するオープンソース・ソフトウェアはTabber、タブ切り替え式インタフェースを手軽に作成できるJavaScriptライブラリだ。
Tabberを使うとタブ切り替え機能が容易に実装できる。予めHTML内に各タブの内容を記述しておく方式はもちろん、Ajaxを使ってコンテンツを取得、表示する方式も選択できる。
選択状態をCookieに保存しておくことで、次回に見た際に同じタブから開始するサンプルもある。よく使うインタフェースだけに、こうして手軽に実装できるメリットは大きい。
実装はTabber本体の読み込みだけでほぼ完了する(Ajaxを使う場合はprototypeが必要)。ぜひ一度お試しあれ。
JavaScript Tabifier automatically create an html tab interface
http://www.barelyfitz.com/projects/tabber/
tabber - Google Code(プロジェクトサイト)
http://code.google.com/p/tabber/