復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

jQueryでタブ表示

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

f:id:hebita164:20100620233636p:image

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

jQuery tab

jQuerytabsというメソッドを使います。

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> 
CSS

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

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

タブの作り方

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

<!-- 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>

これだけで実装が可能です。
コンテンツのタブ化をする際には、是非ともcookieによる保存を行いたいですね。

Twitterに投稿 Facebookでshare

広告を非表示にする