Yahoo!JapanとかGoogleのトップページにも最近使われているんだけど、タブのインターフェイスって、情報量が多いときは結構重宝する、とおもいます。サクッと出来る方がいいかとおもったりするので、いろいろと探してみました。結構あるんだけど、なかでも一番使いやすそうなjQueryのライブラリをつかったもので、試してみることにしてみました。いわゆるシンプルなエフェクトなどが入らないタブから、表示されるコンテンツがフェードするタイプ、容量があるときに読み込み表示がされるものとかバリエーションが結構いい感じ。今回はフェードインしてコンテンツが表示されるのをどこかで使いたいので、そこの部分だけを抜き出してみる。

サンプル

ただ、新規ウィンドウで開くことができなかったので、 MovabletypeなどのCMSとの連携して、各カテゴリーの最新記事5タイトルとか、タグの最新記事とかを読み込んで行ったら、ポータルのトップページっぽい物が動的に生成できそう。

jQuery.jsのなかでも３つのライブラリだけを使用します。

jquery-1.2.4b.js
ui.core.js
ui.tabs.js

jQueryはここからダウンロードと確認。

Javascript

$(function() {

$('#container-1 > ul').tabs();

$('#container-2 > ul').tabs({ selected: 1 });

$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });

$('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });

$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });



$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });

$('#container-8 > ul').tabs();

$('#container-9 > ul').tabs({ disabled: [2] });

$('<p><a href="#">Remove 4th tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

$('#container-9 > ul').tabs('remove', 3);

return false;

});

$('<p><a href="#">Insert new tab at 2nd position<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

$('#container-9 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);

return false;

});

$('<p><a href="#">Append new tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

$('#container-9 > ul').tabs('add', '#appended-tab', 'New Tab');

return false;

});

$('<p><a href="#">Disable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

$('#container-9 > ul').tabs('disable', 2);

return false;

});

$('<p><a href="#">Enable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

$('#container-9 > ul').tabs('enable', 2);

return false;

});

$('<p><a href="#">Select 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

$('#container-9 > ul').tabs('select', 2);

return false;

});

$('<p><a href="#">Get selected tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {

alert( $('#container-9 > ul').data('selected.tabs') );

return false;

});

$('#container-10 > ul').tabs({ selected: null, unselect: true });

$('#container-11 > ul').tabs({ event: 'mouseover' });

});

CSS

は基本的にあとからでも修正可能なんですけど、ひとまず同じ物をつかってみる。

HTML部分

<ul> 


<li><a href="#fragment-10"><span>生態学とエコロジー</span></a></li> 


<li><a href="#fragment-11"><span>歴史</span></a></li> 


<li><a href="#fragment-12"><span>地球規模の活動</span></a></li> 


<li><a href="#fragment-13"><span>４つの目タブ</span></a></li>


</ul> 


<div id="fragment-10"> 


<p> 生態学 (Ecology) は、生物学の一分野と見なされている。ただし、生態系として生物を取り巻く物理化学的環境を扱う場合もあるので、生物学の範囲を超える場合もあり得る。いずれにせよ、生態学は生物と環境の関係を取り扱う学問である。ここで言う環境は生物の主体の取り扱いによって変わり、同種の他個体、他種の個体、周辺のさまざまな生物、物理化学的環境までを含む。


</div> 


<div id="fragment-11"> 


二十世紀前半から中盤にかけては、人間の工業技術の発達とその成果が、自然環境に大きな影響が与えるようになった時期といってよいだろう。具体的には化学、特に有機化学の進歩による、取り扱う物質の多様化と、新たな合成物質の増加、そして電気や動力関係の進歩による人間の活動の大規模化の影響が大きい。


</div> 


<div id="fragment-12"> 


人間と自然との間の互恵的な関係に関する知識の普及を目的として、1971年、ユネスコは「人間と生物圏 (Man and Biosphere, MAB)」と呼ばれる研究計画を開始した。その数年後、生物圏保護の概念が定義された。


1972年、国際連合はストックホルムで人間と環境に関する最初の国際会議を開いた。準備には Rene Dubos とその他の専門家が関わった。「地球規模で考え、地域で活動しよう」というフレーズはこの会議が起源である。


</div> 


<div id="fragment-13">		Yahoo!JapanとかGoogleに最近あるんだけど、タブのインターフェイスって、情報量が多いときは結構重宝するし、サクッと出来る方がいいかとおもったりするので、いろいろと探してみる。結構あるんだけど、なかでも一番使いやすそうなjQueryのライブラリをつかったもので、試してみる。シンプルなタブから、表示されるコンテンツがフェードするタイプ、容量があるときに読み込み表示がされるものとかバリエーションが結構いい感じ。


</div> 


</div> 

サンプル本文

http://stilbuero.de/jquery/tabs_3/

http://docs.jquery.com/UI/Tabs

その他のタブインターフェイスいろいろ

http://www.smashingmagazine.com/2007/04/18/14-tab-based-inferface-techniques/

表示する早さも変えられるよ。