2010-01-28 6 views
0

나는 현재 jQuery를 딥 링크 및 여러 용기에 아약스로드 (하위 컨테이너)

여기에 첫 번째 샘플 페이지입니다 .. (아약스로드 저장 URL은) 누군가가 도움이 될 생각 .. 사이트를 개발하고 문제에 부딪쳤다있다 레이아웃 : 내가 링크를 클릭하여 내용을로드 할 경우

<div id="main-container"> 
    <div id="top-menu"> 
    <a href="/link1" rel="ajax" />Link 1</a> 
    <a href="/link2" rel="ajax" />Link 2</a> 
    </div> 
    <div id="content"> 
    <div id="results"> 
    <!-- category results go here --> 
     <a href="/link1/category/cat-1/page/1" rel="ajax" />page 1</a> 
     <a href="/link1/category/cat-2/page/2" rel="ajax" />page 2</a>   
    </div> 
    <div id="categories"> 
     <a href="/link1/category/cat-1" rel="ajax" />cat 1</a> 
     <a href="/link1/category/cat-2" rel="ajax" />cat 2</a>  
    </div> 
    </div> 
</div> 

모든 .. 어려운 부분이 시작 내가 (깊은 링크 가능한 URL을 만드는) 역사 지원을 활성화하려면 잘 ..

내가 알아낼 질수 예 : full url이 주어진 경우 필요한 부분을로드하는 방법

site.com/link1.html#/category/cat-1/page/ 

일부 아이디어는 내가 가진 :

  1. 각 링크 URL이
  2. 를로드 할 수있는 위치에 대한 데이터를 다시 전송 일부 컨트롤러로 전송되는 내용
  3. 를로드 알려주는 속성이
  4. 해시는 여러 부분으로 구성되어 있으며 배열로 분할 된 다음 각 부분이로드됩니다.

글쎄 sult는

답변

0

체크 아웃 Ben Alman's BBQ: Back Button & Query Library Plugin

.. 다소 당신이 페이지 새로 고침없이 홈 페이지, 메시지, 친구 목록을 탐색 할 수 있습니다 .. 그리고 장소의 각에서 당신이 sublinks으로 탐색 할 수 있습니다 facebooks 탐색과 같이해야한다

1

tnx :)이 모습을 보았습니다. 그러나 정말 실용적인 플러그인인데, 제가 실종 된 부분을 알아 냈습니다. (아마 포함 시켰을 것입니다. js 코드)

var hash = window.location.hash.substr(1); 
var href = $('a[rel=ajax]').each(function(){ 
    var href = $(this).attr('href'); 
      var where = $(this).attr('test'); 
      //alert(where); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html'; 
     $('#content_full').load(toLoad) 
    }           
}); 

해시가 발견되면 (페이지로드 후) 호출되는 라인입니다. (스크립트를 조금 고급 버전으로 만들고 싶었습니다. 데이터가로드되는 기본 컨테이너 대신에 위치를 가져오고 싶었습니다. url .. (이유는 묻지 않음))

이제는 모든 것이 잘 작동해야합니다. :) (각 섹션을로드해야하는 각 아약스 링크에 변수를 추가하면이 데이터가 다음으로 전송됩니다. 이 변수가 설정되지 않으면 스크립트는 전체 내용을 출력합니다. 필요한 데이터 (원하는 부분 만)을 출력하는 PHP 스크립트