お手軽にタブ切り替えを行うJavaScript「Spotlight」
[ 2分で読めて簡単導入できます]
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日
