タブを指定して開く

  • 投稿日:
  • by
  • カテゴリ:
  • ハッシュタグ:

jqPlotと関係ない部分は、既存のタブページを jQuery UI Tabs に置き換えました。
ただ、既存のタブページではページ遷移して元のページに戻ってきたときに、元のタブが開くようにしていました。
jQuery UI Tabs で同じことをやるには、どうしたらいいのでしょうか?

調べてみると、手っ取り早いのは Cookie を使用する方法のようです。
「tech.ludicmind.net」さんの「jQuery UI/Tabs」という記事によると、

$(function() {
$("#tabs").tabs({cookie: {expires: 30}});
});

なんてやればいいみたい。

その前に、jquery.cookie.js を読み込んでおく必要がありました。 解凍した jQuery UI から development-bundleフォルダの中の external フォルダの中に入っています。 自分はexternal フォルダごと ./js フォルダ配下にコピーしました。 もちろん jquery.cookie.js を読み込むように、PHPファイルに記述するのも忘れずに。
これで確かに前回開いていたタブが開かれるようになりました。 PHPとかが介在しないので余計な手間がかかりません。


ただここでまた問題が。

日程表のページだと、前月から翌々月までのタブがあるのですが、できれば最初に開くときは当月(2番目)のタブを開かせたいです。
jQuery UI Tabs の場合、2番目のタブを開かせるには、

$(function() {
$("#tabs").tabs({ selected: 1 });
});

とやればいいのですが、selected オプションが指定されていると、先程の Cookie によるタブの記憶は無効になります。

ということで、こういう場合はPHPからタブ番号を変数として、jQuery UI Tabs に渡してselected オプションを指定して開くことになりそうです。