飾りを付けてより分かりやすく、グラフィカルに!
サンプル01でとりあえずアコーディオンパネルの基本はできましたので、今度はより分かりやすく、グラフィカルなUIにブラッシュアップしましょう。変更するのは、(1)現在開いているラベルの色、(2)閉じているラベルにマウスカーソルが重なったとき(マウスオーバー時)の色、(3)マウスカーソルの形状――の3点です。
新たに追加するCSSを以下に示します。dt.overがマウスオーバー時、dt.selectedが選択時のラベルのCSSです。背景画像を変更し、dt.overにはcursor:pointer;を追加してマウスカーソルをポインター(指の形)に変更しています。CSSファイル内のdt.overの後にdt.selectedを記述することで、表示中のパネルのラベル部分にマウスが重なってもマウスオーバーのスタイルは適用されません。
▼サンプル02(CSSの追加部分)
dt.over{
background:url("images/background-over.jpg");
cursor:pointer;
}
dt.selected{
background:url("images/background_selected.jpg");
cursor:default;
color:black;
}
スクリプト部分は以下のように変更します。
▼サンプル02(スクリプト部分)
$(function(){
$("dd:not(:first)").css("display","none")
$("dt:first").addClass("selected");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
$("dt").removeClass("selected");
$(this).addClass("selected");
}
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
})
変更後のスクリプトでは、初期状態で表示されている1番目のパネルのラベル部分にclass属性「selected」を追加し、選択状態のCSS「dt.selected」を適用します。
$("dt:first").addClass("selected");
クリックされたdt要素にのみ、選択状態のスタイル(dt.selected)を適用するため、clickイベントの処理に以下の2つの命令を追加します。まず、dt要素に対して設定されているclass属性「selected」をいったん取り除き、次にクリックされたdt要素に対してclass属性「selected」を追加し直します。
$("dt").removeClass("selected");
$(this).addClass("selected");
マウスオーバー効果を付けるため、新たにmouseover()イベント、mouseout()イベントを設定します。ラベルにマウスが重なると、dt要素にclass属性「over」を追加し、外れるとclass属性を取り除きます。これで、新たに追加したCSSをイベントの発生に応じて適用できます。
$("dl dt").click(function(){
(中略)
}).mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
▼サンプル02(実行結果)
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。