«前の日記(2012-08-04 (土)) 最新 次の日記(2012-08-06 (月))» 編集
にっき
Google
2003|10|11|12|
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|10|12|
2015|01|12|
2016|01|12|
2017|01|

2012-08-05 (日) [長年日記]

_ tDiaryでGitHubみたいなページ遷移をするテスト

誰か名前をつけて欲しいが。 > GitHubみたいなページ遷移

GitHubで有名になった、ページの一部だけをajaxで書き換えるけどURLも書き換わって、しかも戻るボタンで戻れるというあれである。いろいろ調べてみるとpjaxというのがそれらしいのだが、これを使うにはサーバ側の対応(X-PJAXヘッダがセットされていたら一部のみレンダリングして返すとか)がいるみたいなので、今回はJavaScriptのみでhistory.pushStateを使って実装した。

http://elpeo.jp/diary/js/state.js

今のところa[rel=next]とかに引っ掛けてるので、最新表示のナビゲーションメニュー(「«前5日分」とか)をクリックすると発動する。日毎表示にはrelが設定されてないので発動しない。GitHubみたいなスライドアニメーションも入れてみた。しかし、戻るボタンで戻ったときにもサーバに取りに行ってる上にアニメーションしないなど、GitHubのあれに劣ってる部分が多々あるので要調査。サーバ側でdiv.mainだけ吐けるようにしてpjax使ったほうが早いかも。


«前の日記(2012-08-04 (土)) 最新 次の日記(2012-08-06 (月))» 編集