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

お手軽にタブ切り替えを行うJavaScript「Spotlight」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Yahooのトップページでも使用されているように画面遷移しないタブメニューはもはや必須になりつつあります。
そこで今回はjQueryプラグイン「jquery_spotlight」を使って、タブメニューを作るとともに、自動でコンテンツを切り替える方法を紹介します。

使用方法
jquery_spotlightからspotlight.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="spotlight.js"></script>
<script type="text/javascript">
$(function() {
$('#spotlight').spotlight({
displayTime: 5, //表示時間
transition: ['fadeIn', 'slow'] //遷移方法
});
});
</script>

上記を記述したら以下のようにタブ部分を書きます。
<div id='spotlight' class='spotlight'>
<ul id='spotlight_items'>
<li class='spotlight_item'>
メニュー１
<div class='featured_content'>コンテンツ１</div>
</li>
　　～以下同～
</ul>
<div class='spotlight_feature'></div>
</div>

さらに、上にあわせてCSSを指定すれば完成です。
例） .spotlight_feature { position: relative;border: solid 1px #ccc;border-top:none; width: 504px; height: 6.5em;clear:both; }
.featured_content { display: none; }
ul { border: solid 1px #ccc; border-right-style: none; }
ul, li { padding: 0; margin: 0; list-style: none; }
li { line-height: 1.5; width:100px;text-align:center;padding: 0;border-right:1px solid #ccc; float:left;} li:hover, li.on { background: #ccc; }

お手軽にタブ切り替えを行うJavaScript「Spotlight」サンプル

記事作成：2009年01月05日

前の記事：2008年アクセスランキング
次の記事：JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」