Re:Creator’s Kansai

こんにちわ。to-Rの西畑です。
jQueryによるJavaScript入門,第4回はclassの制御ということで前回のタブパネルをブラッシュアップしていきたいと思います。

前回のタブパネルはcssをすべてjavascriptで制御していましたが、これはjavascript的にはあまり綺麗な書き方ではありません。

タブのデザインが変更された場合、javascriptソースを大幅に変更をしなくてはいけなくなるためです。

javascriptでは振る舞いに関する記述を行い、装飾やデザインはなるべくスタイルシートで制御したほうが、修正の際に更新が容易になります。

そのために利用するのがclassの制御するめに利用する2つのjQuery関数、addClassとremoveClassです。

addClass

$(“class名を追加したい要素のCSSセレクタ”).addClass(“追加したいclass名”);

という感じで、記述します。

addClassのサンプル

input要素がクリックされた際にh1要素に『addClass』というclass名を付加するサンプルになります。

$(function(){
	$("input").click(function(){
		$("h1").addClass("addClass");
	})
});

removeClass

$(“class名を削除したい要素のCSSセレクタ”).removeClass(“削除したいclass名”);

removeClassのサンプル

input要素がクリックされた際にh1要素から『removeClass』というclass名を取り除くするサンプルになります。

$(function(){
	$("input").click(function(){
		$("h1").removeClass("removeClass");
	})
});

classの制御

それではタブパネルのサンプルに修正を加えていきたいと思います。

まずは各タブがクリックされた際の処理。

$(".tab li.tab_a").click(function(){
	$(".tab li.tab_a").css("border-bottom","1px solid #EEEEEE");
	$(".tab li.tab_a").css("background","#EEEEEE");
	$(".panel li.tab_a").css("display","block");
});

ここでデザインを制御しているのは2行目のborder-bottomと3行目のbackgroundになります。

class名に関しては、選択状態用のclass『selected』がすでに用意されていますので、このclass名をつけるようにします。

$(".tab li.tab_a").click(function(){
	$("li.tab_a").addClass("selected");
});

tab_b以下のタブも同様に変更します。

また、選択状態を取り外す記述の処理

$(".tab li").click(function(){
	$(".tab li").css("border","1px solid #999999");
	$(".tab li").css("background","#DDDDDD");
	$(".panel li").css("display","none");
})

は以下のように修正します。

$(".tab li").click(function(){
	$(".tab li").removeClass("selected");
	$(".panel li").css("display","none");
})

これで終了です。

サンプル

変更前と比べていただいたらわかると思いますがソースコードの量も減っていますし、デザインの変更は.selectedのCSSを変更するだけで可能です。

JavaScript OFF環境も考慮する

さて少しJavaScript OFF環境もしてみましょう。

現在、JavaScript OFFの環境でサンプルのソースに訪れるとトピックス以外の項目を見ることができません。

JavaScript OFFもどこまで対応するか好みが別れるところですが、個人的にはJavaScript OFFでも可能な限り情報の閲覧は出来るべきであると考えています。

デフォルトのCSSを変更します

.panel li{
	display:none;
	clear:both;
	background:#EEEEEE;
	border:1px solid #999999;
	padding:10px;
}

を以下のように修正します。

.panel li{
	clear:both;
	background:#EEEEEE;
	border:1px solid #999999;
	padding:10px;
}

display:none;を取り除くことによりJavaScript OFFの方でも情報へのアクセスが可能になります。

JavaScript　ON環境のためにタブパネル用のスタイルはJavaScript用のスタイルはJavaScript上で記述します。

$(".panel li:not(.tab_a)").css("display","none");

CSS3セレクタのnot擬似クラスを利用してクラス名がtab_a以外のパネルを非表示にしています。

サンプル

JavaScript OFF環境にどこまで対応するかも好みが分かれるところですが。参考までに

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中