前の記事 ≪:CSSとJavaScriptによってFlashで作ったようなクールな動くメニューを作る
次の記事 ≫:SQLインジェクションに関するチートシート

クールなタブUIを簡単に実現できるJavaScriptライブラリ「LivePipe」

2007年03月19日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Control.Tabs : Projects : LivePipe
Control.Tabs is a javascript library for creating accessible, flexible & unobtrusive tabbed interfaces in your applications or pages.

クールなタブUIを簡単に実現できるJavaScriptライブラリ「LivePipe」。
次のようなCSSベースのクールなタブUIを簡単に実現できます。



prototype.jsベースのライブラリとなっており、次のようなソースで動きます。
タブ部分のHTMLはulタグとdivタグを使っており、シンプルで分かりやすいですね。

<script>
Event.observe(window,'load',function(){
    $$('.tabs').each(function(tabs){
        new Control.Tabs(tabs);
    });
});
</script>

<ul class="tabs">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>

<div name="one">
<p>I am tab one. I belong to group one.</p>
</div>

<div name="two">
<p>I am tab two. I belong to group one.</p>
</div>

<ul class="tabs">
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
</ul>

<div name="three">
<p>I am tab three. I belong to group two.</p>
</div>

<div name="four">
<p>I am tab four. I belong to group two.</p>
</div>

ロード時に new Control.Tabs によってタブを初期化しています。
タブ変更前後のコールバック関数も使えます。

関連の記事検索:CSS, UI, Ajax
スポンサード リンク

By.KJ : 2007年03月19日 07:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)