Subscribed unsubscribe Subscribe Subscribe

Twitterとかの#! (fragment urlというらしい) 使うメモ

#!ってなにか

http://twitter.com/#!/ToQoz みたいなやつ
フラグメントURL / fragment URL と呼ばれているらしい。
Ajaxページで戻るボタンで戻れたり、クロールしてもらえるようになってSEO的に良いとか。

準備

jQuery, jQuery-UI(エフェクト簡単に付けるために使用), hashchange.js読み込む。

使い方

タブ切り替え時何かしらサーバー側とのデータのやり取りあるとして、
http://example.com/!#/tab1http://example.com/#!/tab2
みたいな感じでタブ切り替えしたい時。
*!#以下がないときはtab1を表示

(function($){
  var tab1 = function() {
    $("#tab1").hide();
    $("#tab2").hide();
      $.ajax({
        url: "change_tabs",
        type: "get",
        dataType: "json",
        data: ({
          "tab": "first"
        }),
        success: function(request){
          //適当に$.eachでも使いながらDOMいじって値入れる
        });
      },
      complete: function() {
        $("#tab1").show("bind");
      }
    });
  };

  var tab2 = function() {
    $("#tab1").hide();
    $("#tab2").hide();
      $.ajax({
        url: "change_tabs",
        type: "get",
        dataType: "json",
        data: ({
          "tab": "second"
        }),
        success: function(request){
          //適当に$.eachでも使いながらDOMいじって値入れる
        });
      },
      complete: function() {
        $("#tab2").show("bind");
      }
    });
  };

  // ハッシュの変化を監視 (jquery.hashchange.js読み込む必要あり)
  $(window).hashchange(function() {
    var parsed = decodeURIComponent(location.hash).split("/");
    if (parsed[1]) {
      switch (parsed[1]) {
        case 'tab1':
          tab1();
          break;
        case 'tab2':
          tab2();
          break;
      }
    } else {
      tab1();
    }
  });
  $(window).hashchange();
});

メモ

DOMの構造が一緒で中の処理もあんまり変わらなかったらtab1()とtab2()まとめてしまったほうがいいかも。