[JS]くるっと反転させるパネルをタブで操作するスクリプト -Flipping Tabs

くるっと反転させるパネルをタブで操作するスクリプトをWeb Developer Plusから紹介します。

Create Flipping Content Tabs Using jQuery
demo

スクリプトのベースには、先日紹介したQuickFlip 2が使用されており、下記のスクリプトを記述します。

JavaScript

$('document').ready(function(){
	//initialize quickflip
	$('#flip-container').quickFlip();
	$('#flip-navigation li a').each(function(){
		$(this).click(function(){
			$('#flip-navigation li').each(function(){
				$(this).removeClass('selected');
			});
			$(this).parent().addClass('selected');
			//extract index of tab from id of the navigation item
			var flipid=$(this).attr('id').substr(4);
			//Flip to that content tab
			$('#flip-container').quickFlipper({ }, flipid, 1);
			return false;
		});
	});
});

HTMLはシンプルで、タブはリスト要素、パネルはdiv要素で実装されています。

HTML

<div id="flip-tabs">
<ul id="flip-navigation">
<li class="selected"><a href="#" id="tab-0">Recent</a></li>
<li><a href="#" id="tab-1">Popular</a></li>
<li><a href="#" id="tab-2">Comments</a></li>
</ul>
<div id="flip-container">
<div><!--Put Content for first tab here--></div>
<div><!--Put Content for second tab here--></div>
<div><!--Put Content for third tab here--></div>
</div>
</div>