jQuery UI Tabs に 履歴

jQuery

jQuery UI のTabライブラリを履歴対応にしました。
戻るボタンを押すと前のタブに戻ります。
これならブックマークで特定のタブを保存できます。
SEO的にも良いかなぁ。

<html><head>
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/jquery.history.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
  <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />  
  <script type="text/javascript"> 
  function pageload(hash) {
    if(hash) {
      $("#load").load(hash + ".html");
      $("#tabs").tabs("option", "selected", hash);
    } else {
      $("#load").empty();
    }
  }
  $(function(){
    $("#tabs").tabs();
    $.historyInit(pageload);
    $("a[rel='history']").click(function(){
      var hash = this.href;
      hash = hash.replace(/^.*#/, '');
      $.historyLoad(hash);
      return false;
    });
  });
  </script>
</head><body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1" rel="history">リンゴ</a></li>
    <li><a href="#tabs-2" rel="history">ゴリラ</a></li>
    <li><a href="#tabs-3" rel="history">ラッパ</a></li>
  </ul>
  <div id="tabs-1"><p>ああああああ</p></div>
  <div id="tabs-2"><p>いいいいいい</p></div>
  <div id="tabs-3"><p>うううううう</p></div>
</div>
<hr/><div id="load">none</div>
</body></html>


jquery history プラグインアップデート
http://blog.mikage.to/mika/2009/03/jquery-history-.html


UI/API/1.7.1/Tabs
http://docs.jquery.com/UI/Tabs