Ajaxでタブインタフェースを実現するためのライブラリ
2006年02月22日-
CSS Tabs seem to be all the rage with the kids these days. I love the idea of them. It seems that the most popular method of creating tabs using CSS is the Sliding Doors method. They seem to look the coolest and are very easy to implement. However, they're so... static.
Ajax Tabsを使えば次のようなCSSベースでデザインされたタブインタフェースの部品が簡単に作れます。
Ajaxを使ってタブが更新されるため、各タブ内のページ(HTML)は独立したファイルにすることが可能です。
(例えば、page1.html, page2.html, page3.htmlのような感じにページ分け可能)
HTMLソースも次のような感じのシンプルなものになります。
CSSベースでデザイン出来るので独自カスタマイズも容易ですね。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>havocStudios: Ajax Tabs Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Demo of havocStudios ajax tabs" />
<meta name="keywords" content="tabs ajax css " />
<style type="text/css" media="screen">@import "tabs.css";</style>
<script src="ajax.js" type="text/javascript"></script>
<script src="tabs.js" type="text/javascript"></script><script type="text/javascript">
function doOnLoad() {
OpenTab("tab_page1", "Page 1", "page1.html", false, '');
}
</script>
</head>
<body onload="doOnLoad()">
<div id="tabContainer">
<div id="tabs">
<ul id="tabList">
</ul>
</div>
<div id="tabPanels"></div>
</div>
</body>
</html>
閉じるボタンなんかも気が利いてます。
By.KJ : 2006年02月22日 11:59 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)
最新のブログ記事(新着順)
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された５００種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約７５００種の汎用ピクトグラムアイコン集「Phosphor Icons」
- ほぼCSSで実装されたUIフレームワーク「Ellegant CSS」
- TailwindCSSベースの150種類以上のUIライブラリ「SailboatUI」
- 1700種類以上のSVGアイコン「MingCute Icon」
- 過去のエントリ
