03
01
jQueryを利用したタブメニューを設置
2008-03-01
jQueryを利用したタブメニューを設置してみます。タブは設定した間隔で自動に移動します。ソースはこれから紹介しますが画像やCSSファイルはサンプルファイルにあるのでダウンロードしてお使いください。
body部分はこんな感じです。タブの数は自由に変更できます。
<div id="rotate"> <ul> <li><a href="#fragment-1"><span>Section 1</span></a></li> <li><a href="#fragment-2"><span>Section 2</span></a></li> <li><a href="#fragment-3"><span>Section 3</span></a></li> <li><a href="#fragment-4"><span>Section 4</span></a></li> <li><a href="#fragment-5"><span>Section 5</span></a></li> </ul> <div id="fragment-1">Section 1の内容</div> <div id="fragment-2">Section 2の内容</div> <div id="fragment-3">Section 3の内容</div> <div id="fragment-4">Section 4の内容</div> <div id="fragment-5">Section 5の内容</div> </div>
JavaScriptはこんな感じです。外部ファイルは３つも読み込みます。「.tabs('rotate', 5000);」の部分を変更すると次のタブへ移動するまでの時間を変更できます。
<script src="jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="ui.tabs.pack.js" type="text/javascript"></script>
<script src="ui.tabs.ext.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#rotate > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 5000);
});
</script>
CSSはすべて外部化しています。ファイルはサンプルにありますのでダウンロードしてみてください。
<link rel="stylesheet" href="ui.tabs.css" type="text/css">
