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

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

sponsors

使用方法

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>

サンプル

Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.

Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.

sponsors

Javascriptサンプルページ一覧
skuare.net