skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptで作るシンプルなタブメニュー「simpleTabs 」

｜ ｜ ｜ ｜ ｜ ｜ ｜

タブメニューの導入には手間がかかります。
また、既存のjsだと余計な機能が入っているケースも多いです。
jQueryプラグイン「simpleTabs」は機能を絞りながら、十分に役立つJavaScriptです。

使用方法
simpleTabsからファイル一式をダウロードします。
<link rel="stylesheet" type="text/css" href="simpleTabs.css" />
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="simpleTabs.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#simpleTabs").simpleTabs({
fadeSpeed: "medium", // スピード：low, medium, fast
defautContent: 1, // デフォルトのタブ
autoNav: "true", // オートナビ？
closeTabs : "true" // クローズをつけるかどうか
});
});
</script>

最後にタブを以下のように記述すれば完成です。
<div id="simpleTabs">
<div class="simpleTabs-nav"></div>　//ナビゲーション表示部分
<div id="simpleTabs-content-1" class="simpleTabs-content">
コンテンツ
</div>
<div id="simpleTabs-content-2" class="simpleTabs-content"> //数字を増やします。
コンテンツ
</div>
</div>

JavaScriptで作るシンプルなタブメニュー「simpleTabs 」サンプル

記事作成：2009年02月24日

前の記事：フロートウィンドウを作成するJavaScript「(mb)ContainersPlus」
次の記事：ハイクオリティなカラーピッカーJavaScript「GcColor」