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

Yahooのトップページでも使用されているように画面遷移しないタブメニューはもはや必須になりつつあります。
そこで今回はjQueryプラグイン「jquery_spotlight」を使って、タブメニューを作るとともに、自動でコンテンツを切り替える方法を紹介します。
お手軽にタブ切り替えを行うJavaScript「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'>
メニュー1
<div class='featured_content'>コンテンツ1</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」サンプル

sponsors

「お手軽にタブ切り替えを行うJavaScript「Spotlight」」をシェアする

記事作成:
記事URL:

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