JavaScript + CSS によるタブ切り替え

ここ数日、実験的にAjaxを駆使したWebアプリケーションを作成してました。まぁ、特に具体的なターゲットがあるわけではないんですが、こうした技術が業務アプリとして活用するに耐えうるだけの信頼性やレスポンスを確保できるんかなぁ、という個人的な興味がありまして。

閑話休題。そのサンプルアプリの作成過程で必要になったタブ機能はこちらのページを参考に実装。『prototype.jsでタブ切り替え』とあったので、「prototypeにタブ機能なんてあったっけ！？」と思って取り込んだのですが、よくソースを見るとタブ切り替えのスクリプトにprototypeを使ってみたってことだったみたい。でも、ちゃんと考えて作りこんであって便利です。感謝。

で、その記事のコメントに「ページの下に隙間ができて…」という書き込みがあったので、自分の環境でも確認したら同じ現象を確認。スクリプトを見ると、タブの表示・非表示に「visibility」を使っているのが原因っぽいので、以下のように「display」を使うよう一部変更。

styleTab: function() {
    if (this.open)
        this.setStyle('block', '', 'open');
    else
        this.setStyle('none', 'absolute', 'close');
    this.open = false;
},
setStyle: function(visibility, position, className){
    var page = $(this.page).style;
    var name = $(this.name);
    page.display = visibility;
    page.position = position;
    name.className = className;
}

「visibility」は非可視化されても要素はそこに生成されちゃいますからね。隙間が気になる方は、お試しあれ。