jQuery 아약스에 히스토리 추가하기

Question

히스토리 플러그인 기능을 내 (정말로 간단한) 아약스 코드에 추가하는 방법을 알아낼 수 없습니다. 여기

지금까지 내 코드입니다 :

$(function() { 

    $.ajaxSetup({ cache: true }); 
    var hijax = $('ul.hijax a'); 
    var loader = $('<div id="spinner"></div>'); 
    hijax.click(function(e){ 
     hijax.removeClass('ajax-on'); 
     $(this).addClass('ajax-on'); 
     var url = $(this).attr('href') + ' #biog-container'; 
     $("#ajax-container").html(loader).load(url); 
     e.preventDefault(); 
    }); 
}); 

이것은의 내용을 당기는 'biog - 용기'의 ID로 사업부를 포함하는 링크 된 페이지가합니다 ('는 사람들에 대한 링크 이름의 목록입니다 전기 - 바로크 오케스트라를위한 사이트입니다!).

아약스 호출은 잘 작동합니다 (예 jQuery!),하지만 역사 플러그인과 (내가 멍청한 프런트 엔드 녀석)에 대한 지원을 추가하는 것에 대해 봤는데 인터넷 검색을하고 봤습니다.

도움 주셔서 감사합니다.

Answer 1

스크립트를 통해 클릭 한 항목을 유지하면서 전역 배열을 만들 수 있습니다. 클릭 할 때마다 요소를 밀지 만, 마지막 항목은 반환 항목이 아닙니다.

반환 지점에서 배열에 두 개 이상의 항목이 있는지 확인하고 항목 하나를 당겨 버리면 (해당 항목이 현재 페이지를 나타냄) 다른 항목을 당겨서 그 위에 클릭을 트리거합니다.

이 코드는 테스트되지 않은 상태입니다! :

$(function() { 
    var links = new Array(), 
    hijax = $('ul.hijax a'), 
    loader = $('<div id="spinner"></div>'), 
    container = $('#ajax-container'), 
    content = container.html(); 

    $.ajaxSetup({ cache: true }); 

    hijax.click(function(e){ 
     var $this = $(this), 
     url = $this.attr('href') + ' #biog-container'; 

     e.preventDefault(); 
     links.push($this); 

     hijax.removeClass('ajax-on'); 
     $this.addClass('ajax-on'); 
     container.html(loader).load(url); 
    }); 

    $('#back-button').click(function(e){ 
     var link; 
     e.preventDefault(); 

     if (links.length > 1) { 
      // This represents the current link 
      links.pop(); 
      // This represents the past link 
      link = links.pop(); 
      link.click(); 
     } 
     else { 
      // This may be empty, or represent the current content 
      links.pop(); 
      // Show the original content 
      container.html(content); 
     } 
    }); 
});