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

Post on:2009年8月4日

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$('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;
		});
	});
});
</textarea>

$('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;

});

</textarea>

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

HTML

<textarea name="code" class="html" cols="60" rows="5">
<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>
</textarea>