ウェブ、ショウジン

jQueryによるタブに画像を使った場合の画面切り替え

2011-5-21
Category
jQuery

この記事だとすんなりいかない場合もあったので
jQueryによるタブメニューに画像ボタンを使った内容の変更・切り替え
というやり方も試してみました。そんなにスマートじゃないけど、人、場合によってはこっちのほうがやりやすいかも。(2012年4月22日追記)

仕事場でよくjQuery、jQueryと言いながら、実は全然知らない、使ったことないのでありましたが(lightboxとかくらいしか)、今回はお仕事で使用する必要があり、若干苦労もしつつ、実装にこぎつけました。ということで、また使えるように遺しておきます。

jQueryを使ったタブによる画面の切り替えですが、タブ部分がテキスト(タブ部分の画像は背景画像とか)のものはたくさんネットでも紹介されていて、探すといいものが見つかるんだけれども、タブのボタン部分がまるまる画像というのは、あんまり見かけなくて、ちょっと苦労しました。

以下、タブボタンに画像を使ったjQueryによる画面の切り替えです。普通にただ画面が切り替わるものと、その画面の切り替えにフェードイン効果をもたせたもの二つをやってみました。

jQueryを使ったタブによる画面切り替え(フェードイン版)

デモ画面

jQuery本体を読み込みます。今回はGoogle APIにあるものを外部リンクで使用。

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>

それと、タブによる画面切り替えの機能を持たせたソースファイルを作成し、それも読み込みます。

<script type="text/javascript" src="./js/jquery_tab_fadein.js"></script>

このjsファイルの中身は以下。

jquery_tab_fadein.js

/* クリックしたときに出る点線を防ぐ(IE対策)*/
$(function(){
			$("ul.btn_tab li a").focus(function(){
				$(this).blur();
			});
})

/* タブボタンのon/offとタブの内容を切り替える */
$(function(){

	/* 初期設定 */
	$("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
	$(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide();

	/* クリック時の処理 */
	$("ul.btn_tab li a").click(function(){

		// 今のul.btn_tab li a.selectedのhrefの値を保持しておく
		var name1=$("ul.btn_tab li a.selected").attr("href");

		$("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
		$("ul.btn_tab li a").removeClass("selected");
		$(this).addClass("selected");

		/* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。
		なので、今付いている_onをいったん削除してから再度_onを付け直す */
		$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));


		$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));

		// 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする
		$(name1).fadeOut(500,function(){

			// クリックされたul.btn_tab li a.selectedのhrefの値を保持
			var name2=$("ul.btn_tab li a.selected").attr("href");
			$(name2).fadeIn(500);
		});
		return false;
	})
})

/* マウスオーバー時の処理 */
$(function(){
	$("ul.btn_tab a").mouseover(function(){

		/* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。
		マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */
		var className = $(this).attr('class');
		if(className!='selected'){
			$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
		}
	}).mouseout(function(){
	var className2 = $(this).attr('class');
		if(className2!='selected'){
			$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"))
		}
	})
})

つづいて、フェードイン効果はもたせていないノーマル版。

jQueryを使ったタブによる画面切り替え(ノーマル版)

デモ画面

jQuery本体へのリンクはそのままに、作成したjsファイルの内容を若干変更して、これを読み込む。

jquery_tab.js

/* クリックしたときに出る点線を防ぐ(IE対策)*/
$(function(){
			$("ul.btn_tab li a").focus(function(){
				$(this).blur();
			});
})

/* タブボタンのon/offとタブの内容を切り替える */
$(function(){

	/* 初期設定 */
	$("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
	$(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide();

	/* クリック時の処理 */
	$("ul.btn_tab li a").click(function(){

		// 今のul.btn_tab li a.selectedのhrefの値を保持しておく
		var name1=$("ul.btn_tab li a.selected").attr("href");

		$("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
		$("ul.btn_tab li a").removeClass("selected");
		$(this).addClass("selected");

		/* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。
		なので、今付いている_onをいったん削除してから再度_onを付け直す */
		$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
		$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
		$(name1).hide();

		// クリックされたul.btn_tab li a.selectedのhrefの値を保持
		var name2=$("ul.btn_tab li a.selected").attr("href");
		$(name2).show();
		return false;

	})
})

/* マウスオーバー時の処理 */
$(function(){
	$("ul.btn_tab a").mouseover(function(){

		/* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。
		マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */
		var className = $(this).attr('class');
		if(className!='selected'){
			$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
		}
	}).mouseout(function(){
	var className2 = $(this).attr('class');
		if(className2!='selected'){
			$("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"))
		}
	})
})

以上。

自分でやったように書いてますが、以下の記事とソースを思い切り参考にさせていただきました。助かりました、ありがとうございます。

jQuery タブ(画像版)プラグインなし

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿