pjax를 통해 새로 고침 없이 페이지 넘기기(새 버전의 jquery와 호환 가능)_jquery

pushState는 히스토리를 조작할 수 있는 API입니다. API 소개 및 사용 방법은 여기를 참조하세요: http://www.welefen.com/use-ajax-and-pushstate.html

현재 http://github.com/, http://plus.google.com, http://www.welefen.com 등의 웹사이트를 이용하고 있습니다.

pjax는 ajax pushState를 캡슐화한 것으로 pushState 기술을 매우 편리하게 사용할 수 있도록 해줍니다.

캐싱과 로컬 저장을 모두 지원하므로 다음에 방문할 때 다시 방문할 필요 없이 로컬 데이터를 직접 읽을 수 있습니다.

그리고 표시 방식은 애니메이션 기술을 지원하며, 시스템 고유의 애니메이션 방식을 사용하거나 애니메이션 표시 방식을 맞춤 설정할 수 있습니다.

여기서는 pjax에 대해 많이 소개하지 않겠습니다. 간단하고 사용하기 쉬우며 부분 새로 고침을 쉽게 달성하고 링크로 인한 깜박임과 작별할 수 있습니다.
이전에 pjax를 보고 데모를 구현한 적도 있고, 메모도 썼는데, jquery 1.9에서는 live() 메서드가 삭제되었고, 새 버전의 pjax도 on() 메서드를 사용하도록 변경되었습니다. 최근 프로젝트에서는 새로운 사용법을 이해한 후 여기에도 새로운 메모를 남깁니다.

환경:
jquery 1.10.2 다운로드
jquery.pjax.js 다운로드

사용법:
pjaxlink 클래스로 모든 링크를 모니터링하고 pjax를 사용하여 링크 페이지의 ToInsert ID가 있는 컨테이너 콘텐츠를 이 페이지의 콘텐츠 ID가 있는 컨테이너로 업데이트합니다. 콘텐츠를 얻는 데 5초 이상 걸리면 다음 페이지로 바로 이동합니다.

코드 복사 코드는 다음과 같습니다.

$(document).pjax('a .pjaxlink' , '#Content', {fragment:'#ToInsert', timeout:5000});

사용 예:
원래 페이지는 점프를 통해 전환됩니다. 나는 pjax를 사용하여 페이지 내용을 변경하지 않고 페이지 전환 링크를 모니터링하고 목록만 업데이트합니다(목록 컨테이너가 상위 노드인지 확인). 페이징 컨테이너) 콘텐츠.

코드 복사 코드는 다음과 같습니다.

if ($.support.pjax) {
//모든 페이징 컨테이너 순회
$('.pagercontainer').each(function(){
//목록 컨테이너 가져오기
$listcontainer=$(this).parent();
/ /목록 컨테이너의 ID 가져오기
var listcontainerid=$listcontainer.attr('id');
//pjax를 사용하여 모든 페이징 링크를 모니터링하고 pjax를 업데이트하도록 정의합니다.
$( document).pjax(' #' listcontainerid ' .pagercontainer a', '#' listcontainerid, {fragment:'#' listcontainerid, timeout:5000});
});
$(document).on( 'pjax:send', function() {
            // pjax가 요청을 보내면 로딩 애니메이션 레이어를 표시합니다                                                            'pjax:complete', function() {
//pjax 처리가 완료된 후 숨깁니다. 로딩 애니메이션 레이어
//속도가 너무 빠르기 때문에 로딩 레이어가 깜박거리고 경험에 영향을 미치므로 여기에 500을 추가하세요. 밀리초 지연
setTimeout(function(){$('#loading').hide( )},500);
});
}