クールなタブUIを簡単に実現できるJavaScriptライブラリ「LivePipe」
2007年03月19日-
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 によってタブを初期化しています。
タブ変更前後のコールバック関数も使えます。
最新のブログ記事(新着順)
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- 過去のエントリ