このページの本文へ

jQueryでアコーディオンパネルUIを自作する (2/3)

2009年10月09日 13時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

飾りを付けてより分かりやすく、グラフィカルに!

 サンプル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.selectedが適用され、1番目のラベルのスタイルが変更される


 クリックされた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(実行結果)

サンプル02の実行画面

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く