人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

●質問者: dmt13
●カテゴリ:インターネット ウェブ制作
✍キーワード:Adobe Ajax URL アンカー コピー
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Quphondi
●60ポイント

ご質問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の機能(セッション変数)を使って記憶させました。


ひとまずはここら辺で

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ