コンテンツがくるっと回転するタブスクリプトFlipping Content Tabs

コンテンツがくるっと回転しているように見えるタブスクリプトFlipping Content Tabs。
画像を回転させるjQueryのプラグインQuickFlip（ダウンロードファイルに同梱）を使用します。

実装は比較的簡単ですが、コンテンツに合わせてCSSの修正が必要です。

【シャガ】
アヤメ科アヤメ属の多年草。
学名の種小名はjaponica（「日本の」という意味）であるが、中国原産でかなり古くに日本に入ってきたものと考えられている。
[出典：Wikipedia]

【シバザクラ】
ハナシノブ科の多年草。
北米原産。4-5月頃にサクラに似た形の淡桃、赤、薄紫、あるいは白色の花を咲かせる。葉形やその匍匐性などから芝桜と名付けられた。
[出典：Wikipedia]

【アブラナ】
アブラナ科アブラナ属の二年生植物。
古くから野菜として、また油を採るため栽培されてきた作物で、別名としてナノハナ（菜の花）、ナタネ（菜種、厳密には採取した種子のこと）などがあり、江戸時代には胡菜または菜薹と呼ばれた。
[出典：Wikipedia]

【チューリップ】
ユリ科チューリップ属の植物。
球根ができ、形態は有皮鱗茎。和名は鬱金香（うこんこう、うっこんこう）、中近東ではラーレと呼ばれる。アナトリア、イランからパミール高原、ヒンドゥークシュ山脈、カザフスタンのステップ地帯が原産。
[出典：Wikipedia]

【ハナショウブ】
アヤメ科アヤメ属の植物。
6月ごろに花を咲かせる。花の色は、白、ピンク、紫、青、黄など多数あり、絞りや覆輪などとの組み合わせを含めると5000種類あるといわれている。
[出典：Wikipedia]

ダウンロード

Flipping Content Tabs Using jQuery
Download Source Code n Tryをクリックすると、jsというフォルダに入ったjquery-1.3.2.jsとjquery.quickflip.jsがダウンロードできます。

チュートリアルの「The CSS Styles」をコピーしてCSSファイルを作成します。
flipping.cssとでも名付けてjsフォルダに入れてください。

実装手順

jsフォルダを丸ごとアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<link rel="stylesheet" href="http://サイトURL/js/flipping.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://サイトURL/js/jquery.quickflip.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
});
</script>

Flipping Content Tabsを表示させる場所に以下を記述。

<div id="flip-tabs" >
	<ul id="flip-navigation" >
		<li class="selected"><a href="#" id="tab-0"  >コンテンツ－１の見出し</a></li>
		<li><a href="#" id="tab-1" >コンテンツ－２の見出し</a></li>
		<li><a href="#" id="tab-2" >コンテンツ－３の見出し</a></li>
	</ul>
<div id="flip-container" >
	<div>
		コンテンツ－１
	</div>
	<div>
		コンテンツ－２
	</div>
	<div>
		コンテンツ－３
	</div>
 ・
 （以下同様に）
 ・
 ・
</div>
</div>

コンテンツ部分に<p>を使用するとCSSの指定が楽になると思います。
では、がんばってください。

«
»

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment