読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

falsandtru版pjax やりかた

pjax jQuery

下記のコードを入れたところpjaxでトップページに戻ったときスライダーの切り替えがぐちゃぐちゃになる。たぶんsetintervalがいかれてる。
このページの「ページ読み込み時の処理」ってとこでいけるかなあ。あとで試す。とりあえずメモ。

http://chibinowa.net/note/js/pjax-fragment.html

あとこの下のURLも関係ありそう。。。ページ遷移時にイベント削除しないといけない。
https://teratail.com/questions/36589

$(function(){

  oSlider();
  oInit();
  /* addPjaxClass(); */

  // pjax遷移用class付与
  /*  function addPjaxClass() {
        selectorArr = [
            'a:not([target])'
        //  ,'.a:not(.n_p)'
        // ,'.hogehoge'
        ];
        for(i=0; i<selectorArr.length; i++) {
            $(selectorArr[i]).each(function() {
            
                $('a:not([target]').addClass('pjax');
                $('.n_p').removeClass('pjax');
            });
        }
    } */

// スライダー --------------------- /////////////////////////////////////

function oSlider(){
var page = 0;
  var lastPage = parseInt($("#slider_o div").length-1);
	//$("#slider_o div").css("display", "none");
  $("#slider_o div").eq(page).css("display", "block");
  
  function changePage(){
    $("#slider_o div").fadeOut(1000);
    $("#slider_o div").eq(page).fadeIn(1000);
  };

  var Timer;
  function startTimer(){
    Timer = setInterval(function(){
      if(page === lastPage){
        page = 0;
        changePage();
      } else {
        page ++;
        changePage();
      };
    }, 5000);
  }

function stopTimer(){
    clearInterval(Timer);
}
startTimer();
} // oSlider関数終わり



function oInit(){

  // ここに他のスクリプトを

} // oInit関数終わり


$.pjax({
		area : '#content', // ここがpjaxでページ入れ替わる
		link : 'a:not([target])', // target="_blank"属性のないものがセレクタ
		ajax: { timeout: 2500},
		wait: 500
});
$(document).on('pjax:fetch', function(){
	        // fetch内が遷移前のエフェクト
		$('body').css('overflow', 'hidden');
		$('#content').attr({'class': 'fadeOut'});
});
$(document).on('pjax:render', function(){
              // render内が遷移後のエフェクト
                oSlider();
	      // addPjaxClass(); // もしpjaxのリンクをクラスで設定するならこの関数で付与。
	        oInit();
		$('#content').attr({'class': 'fadeIn'}); 
		$('body').css('overflow', '');
});

}); 


SNSとアナリティクス対応
http://qiita.com/resistance_gowy/items/533628e129ff3d2a90df


〇「すべてのページで共通の外部スクリプトを参照させこの外部スクリプトでpjaxを設定してください。JavaScriptSNSボタンのような外部サービスの利用を除き原則としてすべて外部スクリプトに記述すべきものです。
先にブートストラップやボイラープレートのソースを読むなどして一般的なページ構造を学んだほうがよいでしょう。」
https://github.com/falsandtru/pjax-api/issues/8


wordpressでのpjax
http://kakurezatou.com/20130620/wordpress-pjax/