jQuery.tabs.js(Plugin) Demo

そのときすうっと霧がはれかかりました。どこかへ行く街道らしく小さな電燈の一列についた通りがありました。それはしばらく線路に沿って進んでいました。そして二人がそのあかしの前を通って行くときはその小さな豆いろの火はちょうど挨拶でもするようにぽかっと消え二人が過ぎて行くときまた点くのでした。

ふりかえって見るとさっきの十字架はすっかり小さくなってしまいほんとうにもうそのまま胸にも吊されそうになり、さっきの女の子や青年たちがその前の白い渚にまだひざまずいているのかそれともどこか方角もわからないその天上へ行ったのかぼんやりして見分けられませんでした。

ジョバンニはああと深く息しました。
「カムパネルラ、また僕たち二人きりになったねえ、どこまでもどこまでも一緒に行こう。僕はもうあのさそりのようにほんとうにみんなの幸のためならば僕のからだなんか百ぺん灼いてもかまわない。」
「うん。僕だってそうだ。」カムパネルラの眼にはきれいな涙がうかんでいました。
「けれどもほんとうのさいわいは一体何だろう。」ジョバンニが云いました。
「僕わからない。」カムパネルラがぼんやり云いました。
「僕たちしっかりやろうねえ。」ジョバンニが胸いっぱい新らしい力が湧くようにふうと息をしながら云いました。
「あ、あすこ石炭袋だよ。そらの孔だよ。」カムパネルラが少しそっちを避けるようにしながら天の川のひととこを指さしました。

ジョバンニはそっちを見てまるでぎくっとしてしまいました。天の川の一とこに大きなまっくらな孔がどほんとあいているのです。その底がどれほど深いかその奥に何があるかいくら眼をこすってのぞいてもなんにも見えずただ眼がしんしんと痛むのでした。ジョバンニが云いました。
「僕もうあんな大きな暗の中だってこわくない。きっとみんなのほんとうのさいわいをさがしに行く。どこまでもどこまでも僕たち一緒に進んで行こう。」
「ああきっと行くよ。ああ、あすこの野原はなんてきれいだろう。みんな集ってるねえ。あすこがほんとうの天上なんだ。あっあすこにいるのぼくのお母さんだよ。」カムパネルラは俄かに窓の遠くに見えるきれいな野原を指して叫びました。

そのときすうっと霧がはれかかりました。どこかへ行く街道らしく小さな電燈の一列についた通りがありました。それはしばらく線路に沿って進んでいました。そして二人がそのあかしの前を通って行くときはその小さな豆いろの火はちょうど挨拶でもするようにぽかっと消え二人が過ぎて行くときまた点くのでした。

ふりかえって見るとさっきの十字架はすっかり小さくなってしまいほんとうにもうそのまま胸にも吊されそうになり、さっきの女の子や青年たちがその前の白い渚にまだひざまずいているのかそれともどこか方角もわからないその天上へ行ったのかぼんやりして見分けられませんでした。

ジョバンニはああと深く息しました。
「カムパネルラ、また僕たち二人きりになったねえ、どこまでもどこまでも一緒に行こう。僕はもうあのさそりのようにほんとうにみんなの幸のためならば僕のからだなんか百ぺん灼いてもかまわない。」
「うん。僕だってそうだ。」カムパネルラの眼にはきれいな涙がうかんでいました。
「けれどもほんとうのさいわいは一体何だろう。」ジョバンニが云いました。
「僕わからない。」カムパネルラがぼんやり云いました。
「僕たちしっかりやろうねえ。」ジョバンニが胸いっぱい新らしい力が湧くようにふうと息をしながら云いました。
「あ、あすこ石炭袋だよ。そらの孔だよ。」カムパネルラが少しそっちを避けるようにしながら天の川のひととこを指さしました。

ジョバンニはそっちを見てまるでぎくっとしてしまいました。天の川の一とこに大きなまっくらな孔がどほんとあいているのです。その底がどれほど深いかその奥に何があるかいくら眼をこすってのぞいてもなんにも見えずただ眼がしんしんと痛むのでした。ジョバンニが云いました。
「僕もうあんな大きな暗の中だってこわくない。きっとみんなのほんとうのさいわいをさがしに行く。どこまでもどこまでも僕たち一緒に進んで行こう。」
「ああきっと行くよ。ああ、あすこの野原はなんてきれいだろう。みんな集ってるねえ。あすこがほんとうの天上なんだ。あっあすこにいるのぼくのお母さんだよ。」カムパネルラは俄かに窓の遠くに見えるきれいな野原を指して叫びました。

jQuery Code(Plugin)

(function($) {
	$.fn.tabs = function(options) {
		var o = $.extend({
			targetID: '#tab',
			tabElement: '.tab-list li',
			boxElement: '.tab-box'
		}, options);
	
		$(o.tabElement, o.targetID).each(function() {
			$(o.boxElement, o.targetID).not(':first').hide();
			$(o.tabElement, o.targetID).eq(0).addClass('selected');
			
			$(this).click(function() {
				var tabIndex = $(o.tabElement, o.targetID).index(this);
				$(o.tabElement, o.targetID).removeClass('selected');
				$(this).addClass('selected');
				$(o.boxElement, o.targetID).hide().eq(tabIndex).addClass('selected').fadeIn();
			});
		});
		return this;
	};
})(jQuery);

jQuery Code(Call)

$(function() {
	$.fn.tabs({
		targetID: '#tab1'
	});
	
	$.fn.tabs({
		targetID: '#tab2'
	});
});

記事に戻る