jQueryでタブ表示 - 復興ログ

Yahoo!JAPANのトップページの
｜トピックス｜経済｜エンタメ｜スポーツ｜その他｜
のようなタブによる表示をjQueryを使ってやってみました。
またCookieを使用して最後に見ていたタブを記憶させることをやります。

蛇田.jpのニュースの閲覧に実装してみました。

jQuery tab

jQueryのtabsというメソッドを使います。

jQueryの呼び出し

呼び出しはGoogle AJAX Libraries APIを使用することで以下のように簡単に書けます。

<head>
・
・
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
	google.load("jquery", "1.4.2");
	google.load("jqueryui", "1.8.2");
</script>
<script src="http://hebita.jp/js/jquery.cookie.js" type="text/javascript"></script> 
<!-- ui tabs.js --> 
<link href="http://hebita.jp/css/tab/ui.tabs.css" rel="stylesheet" type="text/css" /> 
</head>

jquery jquery本体
jqueryui jqueryのui
jquery.cookie 呼べたっぽい jqueryのcookieを使用するプラグイン。詳しくは後述。

CSS

ここからダウンロードできるファイルの
http://stilbuero.de/jquery/tabs_3/ui.tabs.zip

ui.tabs.css - http://hebita.jp/css/tab/ui.tabs.css
tab.png - http://hebita.jp/css/tab/tab.png

を同じフォルダに入れてアップロードします。ファイルへの直リンクは嫌よ！

タブの作り方

以下のような構成にするだけです。

<!-- jQuery発動 -->
<script type="text/javascript">
	$(document).ready(function() {
    $("#ui-tab").tabs({ event: 'mouseover' ,cookie: { expires: 30 } , cache: true});
  });
</script>

<div id="ui-tab">
	<ul>
		<li><a href="#news1"><span>石巻かほく</span></a></li>
		<li><a href="#news2"><span>石巻日日新聞</span></a></li>
		<li><a href="#news3"><span>Yahoo!ニュース宮城</span></a></li>
	</ul>
	
	<div id="news1">
		<p>石巻かくほニュース一覧</p>
	</div>
	
	<div id="news2">
		<p>石巻日日新聞ニュース一覧</p>
	</div>
	
	<div id="news3">
		<p>Yahoo!ニュース宮城一覧</p>
	</div>

</div>

ポイント - jQueryの発動の書き方

ページのレンダリングの最後に発動します。

<script type="text/javascript">
  $(document).ready(function() {
    $("#ui-tab").tabs({ event: 'mouseover' ,cookie: { expires: 30 } , cache: true});
  });
</script>