【AJAX】Adobe SpryのTabbedpanelsについて質問です。タブをデフォルトから他のタブに切り替えた状態で、任意のページ、または別サイトにジャンプした後、ブラウザーの戻るボタンでタブのあるページに戻った際、ジャンプする直前に開かれていたタブを記憶しておく方法を教えてください。


あと、それぞれのタブのなかに別のページからアンカーリンクを貼る可能性もあるので、出来ればタブごとにURLを割り当て(プロパティのようなものをURLの最後に追加するなど・・)変更できる方法などがあるとベストです。

または、上記のような振る舞いの出来るAJAXのタブがあれば教えてください。

僕はデザイナーで、プログラムに関しての知識レベルが低い(コピー&ペーストして設定を変えるくらい)ため、出来るだけ簡単な方法があればうれしいです。

よろしくお願い致します。

回答の条件
  • 1人5回まで
  • 登録:2008/10/22 11:15:46
  • 終了:2008/10/29 11:20:02

回答(1件)

id:Quphondi No.1

Quphondi回答回数59ベストアンサー獲得回数22008/10/24 00:27:46

ポイント60pt

ご質問2点でていますが、逆順で

2.URLからデフォルトで開くタブを指定する

 これは簡単に実現できます。

デフォルトの指定を下記のように指定する時のサンプルです。

.../index.html?t=2

<div class="TabbedPanels" id="tp1">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">あ</li>
    <li class="TabbedPanelsTab" tabindex="1">い</li>
    <li class="TabbedPanelsTab" tabindex="2">う</li>
    <li class="TabbedPanelsTab" tabindex="3">え</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">あああ</div>
    <div class="TabbedPanelsContent">いいい</div>
    <div class="TabbedPanelsContent">ううう</div>
    <div class="TabbedPanelsContent">えええ</div>
  </div>
</div>
<script language="JavaScript" type="text/javascript">
var parm = new Object();
parm['t'] = 1; // 無指定時のデフォルト
if(location.search.length > 1) { // URLlからの指定値取り出し
    var val = location.search.substr(1).split("&");
    for(var i = 0; i < val.length; i++) {
      var t = val[i].split("=");
      parm[t[0]] = eval(t[1]);
    }
}
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: parm['t'] });
</script>

 CSS,jsの読み込み部分は省いてます。解説すると

var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: parm['t'] });

 の、defaultTabでデフォルトで開くTABを指定します。ここではURLを解釈して値を渡していますが、固定値でも動作します。

こちらに日本語のマニュアルがありますので、併せてご参照ください。

http://livedocs.adobe.com/ja_JP/Spry/1.4/help.html?content=WS3A4...


1.ブラウザーの戻るボタンでタブのあるページに戻った際、ジャンプする直前に開かれていたタブを記憶しておく方法

 こちらはHTMLとJavascriptだけの実装では、正直なところ確実な動作は難しいです。

 HTMLとJavascriptのみですと、値をどこかに記憶しておく場所がCookieぐらいしかありません。そのため、Cookieが無効にされている場合は、全くお手上げになってしまうためです。これはspryに限らないと思います。(方法があるなら、私が是非知りたいです(笑))。

 私が実装した例は、PHP言語でのウェブアプリのため、PHPの機能(セッション変数)を使って記憶させました。


 ひとまずはここら辺で

  • id:dmt13
    Quphondiさん、ありがとうございます。

    ご丁寧にご返答いただきありがとうございます!
    URLから開く方法はまさにこちらの求めているものでした。

    1.ブラウザーの戻るボタンでタブのあるページに戻った際、ジャンプする直前に開かれていたタブを記憶しておく方法
    こちらに関しては、やはり簡単にはいかないのですね・・・
    javascriptですとユーザーの環境に左右されてしまうということですね

    ヒントをいただきありがとうございます!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません