Spryで作ったアコーディオンを別ページからの呼び出しでデフォルト表示を切り替える方法

JavaScript

今日、英会話のレッスンに行ったら先生がDreamWeaverを使って自サイトのリニューアル作業をしていてはまっていたようだったから、レッスンを受ける前に話しを聞いてみました。

  • コースの案内ページをAjaxを使って書き換えた
    • AdobeのSpryフレームワーク使ったよ
    • デフォルトで表示させたいページを別ページからのバナーリンクなどで切り替えたい
      • 3種類くらいデフォルトを表示の切替え
    • ページは素のHTML
    • 指定が1つしかできなくて困っている*1

Accordionのサンプルはここを見るとわかりやいです。

グラフィックデザイナーのためのCSSレイアウトメモ : Ajaxライブラリ使用サンプル集「アコーディオン-AdobeSpry」
http://www.ne.jp/asahi/hatakeyama/design/csslayout/ajaxtest/index08.html

デフォルトの切り替え方はわりと簡単で

new Spry.Widget.Accordion("AccordionID",{ defaultPanel: 1 });

とオプションで設定したいMapを第2パラメータとして渡してあげればよいだけ。
でも、これだけだと常に1個目のパネルがデフォルトなってしまうから、1を変数に変更。

「hogehoge.html?private」や「hogehoge.html?group」などの指定でリンクを貼ってQueryStringを利用することにします。

// QueryStringで指定されたデフォルト表示するパネル名を取得する
var defaultPanelPanelName = location.href.split("?")[1];

var defaultPanelOptionNum = null;
switch(defaultPanelPanelName) {
    case "private":
        defaultPanelOptionNum = 0;
        break;
    case "semi":
        defaultPanelOptionNum = 1;
        break;
    case "group_lesson":
        defaultPanelOptionNum = 2;
        break;
    default:
        // 指定がなかった場合のデフォルトパネルを設定
        defaultPanelOptionNum = 0;
}

new Spry.Widget.Accordion("Accordion1", { defaultPanel:
defaultPanelOptionNum });

こんな感じにすればいけます。
QueryStringの扱い方がいまいちな気もするけど・・・

あとで調べてみたら、spryのFWで今回のやりたいことがそのまんまできそうな事がわかりました。。

Using Spry URLUtils to open remote tabs and panels
http://foundationphp.com/tutorials/spry_url_utils.php

JQueryなど他のFWはいっぱいあるのにSpryという選択肢はいったいどれくらい使われているんでしょうかね？DreamWeaverユーザ以外で使っている人いるのかなぁ・・・

*1:デフォルト指定だから