クリエイターのためのWebテク講座 -タブUIを作ろう(2)

今回は、前回のタブUIをカスタムして、タブの切り替わりにフェードで表示するようにします。

z-indexの管理

フェードインの処理を入れる前に、「displayプロパティ」ではなく、「z-indexプロパティ」でタブ表示を管理するようにします。そうすることで、「現在表示されているタブの上に、非表示のタブを重ねてフェードインさせる。」ということができるようになります。今回はHTMLのコードを書き換える必要はありません。

//現在表示中のタブを格納
var nowView;

$(function()
{
    $("#box1").css("z-index" , "1");
    $("#box2").css("z-index" , "0");
    $("#box3").css("z-index" , "0");

    nowView = "#box1";

});

function openFunc(value)
{
    var nowTopIndex = $(nowView).css("z-index");

    nowView = "#box" + value;
    $(nowView).css("z-index" , ++nowTopIndex);
}

まず【nowView】に、表示中のタブを格納します。こうすることで、別のタブをクリックしたタイミングなどに、現在表示中のタブの「z-index」を取得できるようになります。

あとは、タブクリックのイベントハンドラで

1.現在表示中のタブの「z-index」を取得 2.クリックされたタブを【nowView】に格納し、クリックされた対象のタブの「z-index」を【1】で取得した値を加算して、上に重ねる。

という手順でタブの切り替えを実装します。あとは、タブの重なり順を変えて表示する際に、フェードインを実装すればいいのです。

フェードインを実装する

フェードインを実装するには、jQueryの【fadeInメソッド】を使います。【fadeInメソッド】は、【display:none;】になっている要素を、フェードインさせながら表示するメソッドです。

使い方は
$(セレクタ).fadeIn(スピード , イージング , コールバック);
となります。
【イージング】と【コールバック】は省略可能です。これらについては、まだ解説していないので、今回は省略しましょう。

また、【スピード】には、「ミリ秒」のほかに、【slow】【normal】【fast】を指定できます。

この【fadeInメソッド】を以下のように挿入しましょう。

function openFunc(value)
{
    var nowTopIndex = $(nowView).css("z-index");

    nowView = "#box" + value;
    $(nowView).css("z-index" , ++nowTopIndex);

    $(nowView).css("display" , "none");
    $(nowView).fadeIn(500);
}

これで、タブのフェードインを実装できます。jQueryのメソッドを使っているので、古いIEにも対応できますね。もちろん、CSS3対応のブラウザであれば、CSS3のtransitionで実装してもいいでしょう。