Twitterとかの#! (fragment urlというらしい) 使うメモ
#!ってなにか
http://twitter.com/#!/ToQoz みたいなやつ
フラグメントURL / fragment URL と呼ばれているらしい。
Ajaxページで戻るボタンで戻れたり、クロールしてもらえるようになってSEO的に良いとか。
準備
jQuery, jQuery-UI(エフェクト簡単に付けるために使用), hashchange.js読み込む。
使い方
タブ切り替え時何かしらサーバー側とのデータのやり取りあるとして、
http://example.com/!#/tab1 ⇔ http://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()まとめてしまったほうがいいかも。