2006年03月02日 14:24 [Edit]

この記事をクリップ！ newsing it! Buzzurlにブックマーク b.hatena.ne.jp/entry javascript - Tabifier

というわけで、こんなの作りました。

CSS と JavaScript でタブ切り替え
もっとシンプルにできそうなアイディアがございましたらご教示下さい。

誰でも簡単に CSS + Javascript でタブ切り替えを作れます。CSSの知識もJavaScriptの知識も不要です!

基本編

  1. 以下をコピペします。
  2. <div class="tab" title="Title 1">のtitleにはタブの見出しを、<div>タグの中にはその内容を書きます。
  3. タブは好きなだけ増やすことが出来ます。class="tab"となっているものが全て「タブ化」します。

カスタマイズ

以下の変数を設定することで、タブの表示を変える事ができます(右辺は初期値)。

いろいろ試してみて下さい。

仕組み

  1. 初期化時に<div class="tab">のstyleをhiddenにした上で、tabに対応するtagを<div class="tabheader">の中に動的に生成
    2. 。
  2. tabがクリックされると、<div class="tabbody">の中に対応する<div class="tab">の中身をelement.innerHTMLでぶちまける。

という非常に単純なものです。詳しくはソースを参照してください。

いづれもMac版のFirefox 1.501 と Safari 2.03で試してます。IE6でも動くはずです。IE5だと無理かも。

(C) 2006 Dan Kogai, All Rights Reserved

Creative Commons License
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
http://blog.livedoor.jp/dankogai/js/tabifier.js

<style src="http://blog.livedoor.jp/dankogai/css/tabifier.js">とか出来れば、もっと楽できたのですがねえ。ランタイムで外部CSSファイルを読み込むって方法ないっすかねえ。

Enjoy!

Dan the (?:ECMA|Java)scripter


Posted by dankogai at 14:24│Comments(2)│TrackBack(1)
このBlogのトップへ│前の記事│次の記事

この記事へのトラックバックURL

この記事へのソーシャルブックマーク
はてなブックマーク
Livedoorクリップ
0 Buzzurl
この記事へのトラックバック
Originally as: "javascript - Tabifier" (in Japanese)
Tabifier - Automagically "Tabifies" Your Web Page【DANKOGAI::Blog】at 2006年03月08日 04:39
この記事へのコメント
貴重なソース公開に感謝
ご参考まで、動作確認ご報告
動作環境：Windows2000+SP4+最新パッチ(IE含む)
Netscape4.78＿＿＿＿＿＿＿×仰せの通り玉砕
Netscape7.1_＿＿＿＿＿＿＿○特に問題なし
Mozilla Firefox1.5.0.1＿＿○同上
IE 6.0.2800.1106,SP1＿＿＿○同上
Posted by とんとかいも at 2006年03月02日 22:45
WinXP SP2にて。

Opera 8.52では問題なし。
IE6(SP2)はこの前と同じく.jsファイルの実行ブロックに会いました。キャンセルすると、表示はそれなりにされますが、タブをクリックしても何も起きません。

# 個人的にはOperaがメインブラウザなのでこのままで問題ないのですが。

いずれの場合も、ウィンドウの幅が狭いとタブの途中で折り返しが入ってレイアウトが崩れます。

なお、もうひとつの方
http://blog.livedoor.jp/dankogai/archives/50397938.html
は、Operaはもちろん、IE6SP2でもほぼ問題ありませんでした。（SOURCE表示が1行になってしまいましたが。）
Posted by ym at 2006年03月03日 13:13
 
このページの上へ▲


blog seo tool : track word