jQuery入門講座サンプル-カテゴリ切替(3)

カテゴリ切替(3)

概要

cssの変更やラジオボタンを採用して実用的なサンプルに

前回でカテゴリ切替の機能は完成させました。今回は、より利用しやすいようにメニュー部分をラジオボタンに変更して現在選択されているカテゴリが分かりやすくなるようにします。ついでにcssを変更してデザインを改善しました。

解説

cssの変更など

まずはcssの変更から確認します。サンプル（cate3/01.html）を開いて、デザインが変更されていることを確認して下さい。とはいえ特別なcss設定はしていないので説明は省略します。

cssの変更に伴い、jQueryの数値を以下の2箇所で変更しました。記事の間隔が広くなったので1行目で変数newsHeightを30から35に変更しました。そして隠す位置がすこし上になったので、2行目で変数hidePosを-40から-45に変更しました。これ以外に変更している点はありません。皆さんもデザインを変更する場合は、この2箇所の値を調整して利用して下さい。

var newsHeight = 35;
var hidePos = -45;

デザイン的には改良されましたが、機能的には足りません。このサンプルではメニュー部分が分かりにくいです。ユーザビリティを考えるのであれば、現在選択されているカテゴリはハイライトさせないといけません。ですので次項ではメニュー部分をラジオボタンにして、現在選択されているカテゴリが分かりやすくなるようにします。

ラジオボタンの実現方法

ラジオボタンの仕組みはタブメニュー（1）で利用したテクニックも利用できるのですが、今回は別の方法で実現したいと思います（より簡単かもしれません）。

考え方は以下の様になっており、まずは全てのメニューをOFFの状態にして、次に選択されたメニューだけONにします。これはタブメニュー（1）で紹介したテクニックと異なり、class属性を付けたり外したりしなくても良いので簡単に理解できると思います。しかし全てのメニューをOFFにするので、ONのタブだけをOFFにするタブメニューのテクニックよりは効率が悪いです（よほどPCのスペックが低くない限り問題はないと思います）。

ラジオボタンの実現方法: 全てのメニューをOFFの状態にする
↓
選択されたメニューだけONの状態にする

ということで、次項では「全てのメニューをOFFの状態」にするFunctionと「選択されたメニューだけONの状態」にするFunctionを作成します。

全てのメニューをOFF、選択されたメニューをON

サンプル（cate3/02.html）を開いて、jQueryに以下の2つのfunctionが追加されていることを確認して下さい。まずは全てのメニューをOFFにするmenuResetFuncから確認します。

menuResetFuncの実行内容はシンプルで、cateButtonのclass属性を持つ要素（つまり全てのメニュー）のcssを変更しているだけです。cssメソッドを利用して、3行目では背景画像をmenu_off.pngに、4行目では文字の色をグレー（#666666）に変更しています。

//---すべてのメニューをOFFに
function menuResetFunc(){
	$(".cateButton").css("background-image", "url(images/menu_off.png)");
	$(".cateButton").css("color", "#666666");
}
//---指定したメニューをONに
function menuOnFunc(target){
	$(target).css("background-image", "url(images/menu_on.png)");
	$(target).css("color", "#f39800");
}

menuResetFuncでは全てのメニューをOFFにするのでセレクタでcateButtonのclass属性を持つ要素を指定すれば良かったのですが、ONにする場合は少し考えなくてはなりません。

menuOnFuncを確認して、引数「target」を受け取るようになっているのを確認して下さい。ここで選択されたカテゴリの情報を受け取って、その要素のcssを変更するようにしています。cssの変更内容は、8行目で背景画像をmenu_on.pngに、9行目では文字色をオレンジ（#f39800）に変更しています。

functionは作成しただけでは実行されません。ですので実行部分を確認しましょう。メニューがクリックされた時に処理を実行したいので、以下の様にメニュー（class属性cateButton）のクリック処理の中に追加します。

$('.cateButton').click(function(){
	var cate = this.id.split("_")[1];
	setPosFunc(cate);
	menuResetFunc();//---全てのメニューをOFF
	menuOnFunc(this);//---選択されたメニューをON
});

4行目でmenuResetFuncを実行し、次にmenuOnFuncを実行します。menuOnFuncには引数を渡さなくてはならないのでクリックされた要素であるthisを引数として送っていることに注意して下さい。これでクリックされたメニューがONの状態に切り替わります。→参考：使い方「thisについて（1）」

今回利用したテクニックでは実行する順番に気を付けてください。例えば順番を逆にして、選択されたメニューをONにしてから、全てのメニューをOFFにすると、当然ながら全てのメニューがOFFになってしまいます。実際に順番を逆にしたサンプルを用意したので、メニューをクリックしても変化しないことを確認してください。
→サンプル（cate3/02b.html）

これでクリックされたメニューがオレンジ色になるようにできましたが、最初は全てが表示されているのに、「All」のメニューが選択されていません。これでは良くないので次項で修正します。

最初にメニュー「All」を選択する

指定されたメニューをONにするにはmenuOnFuncの引数にONにしたい要素いれて実行します。
サンプル（cate3/03.html）を開いてjQueryに以下の1行が追加されていることを確認して下さい。

menuOnFunc("#btn_all");//---最初はallをonに

引数を受け取るmenuOnFuncでは引数は変数targetとして$( )内で利用するので、上記のように文字列として送ればよいのです。クリック処理では「this」を利用していたので、難しく考えてしまうかもしれませんね。

function menuOnFunc(target){
	$(target).css("background-image", "url(images/menu_on.png)");
	$(target).css("color", "#f39800");
}

使い方「オブジェクトについて」で説明したように$( )はjQueryメソッドの省略型です。リファレンスの構文を確認すると、セレクタ（下表1行目）の他にDOM要素（下表2行目）も設定できることが確認できます。

引数にマッチしたjQueryオブジェクトを作成する返値：jQueryオブジェクト: jQuery( セレクタ [,コンテキスト] )ver1.0〜
jQuery( DOM )ver1.0〜
jQuery( jQuery )ver1.0〜
jQuery( Object/Array )ver1.0〜
jQuery( )ver1.4〜
※jQueryは$で置き換えることができます。　例：$(セレクタ)

今回のケースでは最初にAllを選択するために設定した「#btn_all」はセレクタで、クリック時に設定した「this」はDOM要素です。thisがDOM要素であることを忘れている方は使い方「thisについて（2）」を確認して下さい。これでラジオボタンは完成ですが、もう１つ別のデザインを紹介します。

別のデザイン案（ラジオボタン）

記事のタグはカテゴリによって色分けしているのに、ラジオボタンは色分けされていません。ラジオボタンも同じように色分けした方が、よりユーザビリティも上がるので紹介したいと思います。

サンプル（cate3/04.html）を開いてメニューをクリックしてください。カテゴリの色に合わせた色になる思います。これはカテゴリ毎に異なる背景画像を利用しているためです。

利用した背景画像は、以下の様に「menu_on_ + カテゴリ名 + .png」というルールに基づいて命名されています。menu_on_all.png, menu_on_blog.png, menu_on_pickup.png, menu_on_seminer.png, menu_on_project.png

このファイル名のルールを確認したらjQueryを確認しましょう。menuResetFuncは変更していないのですが、menuOnFuncは以下の様に変更しています。ポイントは引数（cate）が追加されている点です。ここに選択されたカテゴリ名を渡すようにします。

function menuOnFunc(target, cate){
	$(target).css("background-image", "url(images/menu_on_"+ cate +".png)");
	$(target).css("color", "#ffffff");
}

渡されたカテゴリ名は2行目で背景画像を切り替える部分に利用されます。ですので前述したように画像が「menu_on_ + カテゴリ名 + .png」と命名されていたのです。

ではmenuOnFuncを実行する部分を確認しましょう。menuOnFuncを実行しているのは以下の2行です。2行目は最初にAllのメニューを選択する部分で、ここでの第2引数は「all」を送っています。ですので「menu_on_all.png」の画像が利用されるわけです。

$(function(){
	menuOnFunc("#btn_all", "all");
	setPosFunc("all");	
	$('.cateButton').click(function(){
		var cate = this.id.split("_")[1];
		setPosFunc(cate);
		menuResetFunc();
		menuOnFunc(this, cate);//---第2引数にcateを追加
	});
});

8行目の部分では変数「cate」を第2引数に利用しています。このcateは記事の位置を変更するsetPosFuncに利用するため5行目で作成したものです。忘れてしまった方は前回の説明を復習してください。この変数cateにはクリックされたメニューから取得したカテゴリ情報が入っているので、これを利用できるのです。

これで完成です。選択されているメニューがカテゴリの色と同じになったので、少しユーザビリティが向上したと思います。これでカテゴリ切替の説明は終わりです。

メモ

ボツ案ついでにobjectオブジェクトについて説明

カテゴリごとに背景画像を作成するのは面倒なので、文字色だけ変更すればよいかな？と思ってサンプルを作成したのですが、やはりデザイン的にダメでした...。→サンプル（cate3/test01.html）

ですが、このサンプルで利用しているobjectオブジェクトのテクニックはjavaScriptではよく利用するものなので紹介しておきたいと思います。まずはソースのjQueryで以下の部分を確認してください。

ここでカテゴリごとに設定する文字の色をobjectオブジェクトとして記憶させています。カテゴリ名はプロパティ名として利用し、その値として文字色を代入しています。

//カテゴリごとの色を設定したobjectオブジェクト
var menuColorObj = new Object();  
menuColorObj.all = "#000000";
menuColorObj.blog = "#80c269";
menuColorObj.pickup = "#a40035";
menuColorObj.seminer = "#f49800";
menuColorObj.project = "#00a1e9";

あとはメニューをONにする部分（つまりmenuOnFunc）で、このobjectオブジェクトを利用します。以下の部分を確認してください。サンプルcate3/04.htmlと同じようにmenuOnFuncの第2引数にはカテゴリ名が渡されるので、これを3行目でプロパティ名として利用します。

function menuOnFunc(target, cate){
	$(target).css("background-image", "url(images/menu_on.png)");
	var myColor = menuColorObj[cate];//---menuColorObjから色情報の取得
	$(target).css("color", myColor);
}

objectオブジェクトはプロパティを利用して値を取得する仕組みです。しかし引数cateには「文字列」でカテゴリ名が代入されているため、プロパティとしては利用できません。文字列をプロパティとして利用するためには以下の様に[ ]内に文字列を入れて利用します（このとき[ ]の前にドットは必要ありません）。

objectオブジェクトのプロパティに文字列を利用する: objectオブジェクトの値を利用する場合は通常以下の様に記述します。
オブジェクト . プロパティ　←ドットを忘れずに

しかし今回のようにプロパティの部分に文字列を利用したい場合は以下の様に記述しなければなりません。
オブジェクト [ 文字列 ]　←ドットを必要ない

つまり以下の2つは同じ意味となります（ドットの有無に気を付けてください）。
menuColorObj.project
menuColorObj["project"]

これはjQueryのテクニックではなくjavaScriptのテクニックですが、よく利用するので紹介しました。
※javaScriptだけでなくほとんどの言語で採用されている構文です。

これで1章：短編集は完了です。続いて2章：診断系コンテンツに入りましょう。

次のページ： 2章「診断系コンテンツ」