jQuery + ajax 해시 / 이력 등

StackOverflow https://stackoverflow.com/questions/1822982

문제

jQuery에서 URL 해시를 사용하여 Ajax에서 기록을 제어하고 링크 / 페이지를 책정 할 수있는 작업을 처리하려고합니다. 거의 모든 플러그인을 시도했는데 제대로 작동하는 것 같지 않으므로 코드 예제가 실제로 없습니다. 그러나 나는 제안, 정보, 튜토리얼 등에 열려 있습니다.

내가 이것을 통합하려는 페이지 중 하나의 차이점은 jQuery 애니메이션 중심 스플래시/로딩 페이지가 있다는 것입니다.

..이 링크에서 모든 스플래쉬 /로드 애니메이션을 우회하고 해시 값 / 문자열 (이 경우 #home)을 기반으로 컨텐츠를 직접로드하려고합니다.

나는 이것을 잠시 동안 알아 내려고 노력하고있다. 어떤 도움을 주셔서 감사합니다. 감사합니다!

도움이 되었습니까?

해결책

그래서 당신은 무엇에 문제가 있습니까? 해시 태그 설정 또는 해시의 변경을 처리 하시겠습니까?

물론 해시를 설정하는 것은 단순히 해시를 링크에 넣는 문제입니다. <a href="www.voidsync.com/2010/#page">Link</a> 그러나 나는 그것이 당신의 문제가 아니라고 생각합니다.

실제로 해시로 무언가를하기 위해서는 예를 들어 100ms에 해시가 변경되어 그에 따라 행동하는 리스너 기능이 있어야합니다. 간단한 기능은 다음과 같이 갈 수 있습니다. 

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

이 (테스트되지 않은) 기능은 해시가 변경된 경우 100ms마다 확인하고 Ajax를 통해 페이지를 업데이트합니다.

이 기능은 페이지로드에서도 작동하므로 사용자가 페이지에있는 경우 다음과 같은 링크가 있습니다. www.voidsync.com/2010/#images, 함수는 페이지 '이미지'페이지를 자동으로로드합니다. 역사와 북마크가 작동합니다.

도움이되기를 바랍니다. 다른 의미인지 물어보십시오.

다른 팁

Tatu의 답변을 바탕으로, 나는이 일을 위해 몇 가지를 바꾸었다. 역사를 유지하므로 뒤돌과 앞면 버튼이 잘 작동합니다. 여기 내가 가진 것이 있습니다.

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

그런 다음 일부 해시를 링크 href 속성에 할당하십시오.

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

그것은 전체 재 작성이 아니며 기본적으로 일부 if 문장을 같은 것에 추가했지만 누군가를 도울 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top