자바 앵커 내비게이션

Question

페이스 북 및 Google 메일과 함께 사용되는 "앵커 탐색"으로 웹 사이트를 만들고 있습니다. 나는 그것을 작동 시키지만 완전히하지 못한다. #contact과 같은 페이지를로드 할 때 링크를 클릭하지 않으면 페이지가로드되지 않습니다. 또한, 내가하고있는 일을 더 효율적이고 효과적으로 수행 할 수있는 방법이 있을까요? 나는 JS 프로그래밍에있어 최고의 사람이 아니다.

자바 스크립트 :

$.navigate = function() { 
    // a new link 
    if($anchor != document.location.hash){ 
    // add a preloader 
    $("#content") 
     .empty() 
     .html('<p class="align-center"><img src="assets/images/loading.gif" /></p>'); 
    // change the anchor saved for next time 
    $anchor = document.location.hash; 
    // get the variables ready for the get 
    var i = $anchor.substring(1).split("/"); 
    var $page = i[0]; 
    var $y = (i[1]) ? i[1] : false; 
    // get the file 
    $.get("callback.php", { x: $page, y: $y }, function(data){ 
     $("#content") 
     .empty() 
     .html(data); 
    },"html"); 
    } 
}; 

$(function() { 

    var $anchor = ""; 
    // change from the URI. This dont work. 
    if(document.location.hash){ $.navigate(); } 

    $("a","#nav") 
    .css({backgroundColor:"#f7f7f7"}) 
    .each(function() { 
     $(this).attr("href","#" + $(this).attr("name")); 
    }); 

    setInterval('$.navigate()', 300); 

}); 

HTML :

<div id="nav"> 
    <ul class="horizontal-nav"> 
    <li><a href="http://streetmafia.co.uk/" name="index">Home</a></li> 
    <li><a href="http://streetmafia.co.uk/about" name="about">About</a></li> 
    <li><a href="http://streetmafia.co.uk/portfolio" name="portfolio">Portfolio</a></li> 
    <li><a href="http://streetmafia.co.uk/contact" name="contact">Contact</a></li> 
    </ul> 
    <div id="l-nav"></div> 
    <div id="r-nav"></div> 
</div> 

Answer 1

가 ReallysimpleHistory jQuery 플러그인을 사용해보십시오.

Answer 2

ReallysimpleHistory 플러그인에 대한 Ditto. 는 내가 완전히 코드를 이해 모르겠지만,이 개 기능으로 분리 것 :에서 (

1. 하나는 아약스 로딩을 수행 (프리 로더를 보여주는 포함)
2. 다른 하나는 현재의 해시를 확인 URL)을 호출하고 이전 함수를 호출합니다.

"$ (function() {..."에서 두 번째 함수를 처음 한 번 호출하면 링크의 클릭 이벤트가 첫 번째 함수 $ (this) .attr ('name')을 사용하여로드 함수에서 해시를 가져올 수 있습니다.

(테스트하지 : P) :

빠른 예를

당신은 아마 jQuery를 역사 프로젝트 체크 아웃 할

function ajaxLoad() 
{ 

var anchor; 

// Check to see if it's being called from an event 
if ($(this).length > 0) 
{ 
    anchor = $(this).attr('name'); 
} 
else 
{ 
    anchor = document.location.hash; 
} 

} 

Answer 3

: 그것은 좀 더 완전한 기능을 갖춘 쉽게 다른 사람보다 구현하는 것입니다 http://www.balupton.com/projects/jquery-history

을, 환상적이라면 지원을 더합니다. 여기 http://www.balupton.com/projects/jquery-ajaxy

jQuery를 역사를 사용하는 예입니다 (: 쉽게 상태로 Ajax 요청을 통합 할 수 있도록 그것을위한 완전한 기능을 갖춘 AJAX 확장도있다/완전한 기능을 갖춘 웹에 2.0 응용 프로그램을 웹 사이트를 변환하는 해시) 데모 사이트에서 가져온과 같이

// Bind a handler for ALL hash/state changes 
$.History.bind(function(state){ 
    // Update the current element to indicate which state we are now on 
    $current.text('Our current state is: ['+state+']'); 
    // Update the page"s title with our current state on the end 
    document.title = document_title + ' | ' + state; 
}); 

// Bind a handler for state: apricots 
$.History.bind('/apricots',function(state){ 
    // Update Menu 
    updateMenu(state); 
    // Show apricots tab, hide the other tabs 
    $tabs.hide(); 
    $apricots.stop(true,true).fadeIn(200); 
}); 

그리고 데모 사이트에서 가져온으로 jQuery를 Ajaxy의 예() :

 'page': { 
      selector: '.ajaxy-page', 
      matches: /^\/pages\/?/, 
      request: function(){ 
       // Log what is happening 
       window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]); 
       // Adjust Menu 
       $menu.children('.active').removeClass('active'); 
       // Hide Content 
       $content.stop(true,true).fadeOut(400); 
       // Return true 
       return true; 
      }, 
      response: function(){ 
       // Prepare 
       var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state; 
       // Log what is happening 
       window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state); 
       // Adjust Menu 
       $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active'); 
       // Show Content 
       var Action = this; 
       $content.html(data.content).fadeIn(400,function(){ 
        Action.documentReady($content); 
       }); 
       // Return true 
       return true; 

그리고 혹시 쿼리 문자열 PARAMS (그래서 0,123,300을 얻으려면) 당신은 사용할 수 있습니다

$.History.bind(function(state){ 
    var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}} 
} 

그래서 행동을보고 그 데모 링크를 확인하고 모든 설치 및 사용 자세한 내용은.