タブClass試作 - 年に何度か

http://shiro.au-lait.net/test/tab/tab.html
前に似た様な事を仕事でやっていたけど部品化はしていなかったのでJavascriptのClassにしてみた。別に変わった事はしていないし、探せばすぐ見つかりそうだけど。
わかりやすいようにGoogleやらYahooやらをiframeに表示していますが、実際にはサブコンテンツというか、サイト内での使用を想定。
最初のタブクリック時以外はフレーム内を読みに行かないので、二度目以降はサクサク切替。ダブルクリックで強制リロード。

function fncSample(){
	var tabs = new KTabs("form_tabs");
	//各タブを設定
	//tabs.addTabid(タブID,ラベル,クリック時URL,初期URL)
	var g = tabs.addTab("google","Google","http://www.google.com/","./blue.html");
	tabs.addTab("yahoo","Yahoo","http://www.yahoo.co.jp/","./blue.html");
	tabs.addTab("mixi","mixi","http://mixi.jp/","./blue.html");
	tabs.addTab("hatena","hatena","http://www.hatena.ne.jp/","./blue.html");
	tabs.createTabs("tabs");//指定したIDの子要素にタブを出力
	tabs.createLayers("layers");//指定したIDの子要素にiframeを含むdivを出力
	g.showLayer();//最初のタブを表示
}

onload時とかにこんな感じで使う。HTML自体は

<body onload="fncSample()" style="margin:5px;">
	<form method="get" id="form_tabs" action="">
	</form>
	<div id="tabs">
	</div>
	<div id="layers">
	</div>
</body>

こんな感じ(要prototype.js)。見た目はスタイルシートで適当に。