2012-09-06 6 views
4

필터링을 위해 isotope을 사용 중입니다. 아주 훌륭합니다. 사용자가 이미지 중 하나를 클릭하면 다른 페이지 (세부 정보 페이지)가 표시되지만 필터링하기위한 메뉴는 여전히 표시됩니다. 이제 내가 원하는 것은 사용자가 가능성 중 하나를 다시 클릭하면 메인 페이지로 돌아가지만 이미 필터링 된 결과로 돌아갑니다.jquery isotope jQuery로 해시 기록 BBQ

이미이 페이지 (http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html를) 읽을 수 있지만 나는 많은 것을

를 이해하지 않았다는 것을 고백 나는이 다음과 같은 HTML 코드가 reccomended 같이

div id="leftMenu"> 

      <span><a href="#filter=*" >All Menus</a></span> 
      <span><a href="#filter=.pizza" >Pizza </a></span> 
      <span><a href="#filter=.soda" >Soda </a></span> 
      <span><a href="#filter=.popcorn" >PopCorn</a></span> 
      <span><a href="#filter=.beer" >Beer</a></span> 
     </div> 

하고 따라와 JS 코드

$('#leftMenu span a').click(function() { 
     // get href attr, remove leading # 
     var href = $(this).attr('href').replace(/^#/, ''), 
     // convert href into object 
     // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } 
     option = $.deparam(href); 
     // set hash, triggers hashchange on window 
     console.log('value de href: '+href+ ' || option: '+option); 
     $.bbq.pushState(recursiveDecoded); 

     return false; 
    }); 

그러나 depram 기능에서 오류가 발생했습니다. 그것은 $ .depram가

내가 depram 방법을 읽기 위해 다른 추가 파일을 링크해야합니까 함수 아니라고 하더군요?

누구든지 달성하거나 이해하는 방법을 도와 줄 수 있습니까 ??

많은 감사

편집 - 나는 두 개의 별도의 js 파일을 발견 내 진행, 나는 그들에게 내가 오류를 가지고하지 않습니다

$('#leftMenu span a').click(function() { 
     // get href attr, remove leading # 
     var href = $(this).attr('href').replace(/^#/, ''), 
     // convert href into object 
     // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } 
     option = $.deparam(href); 
     // set hash, triggers hashchange on window 
     $.bbq.pushState(option); 
     console.log("--> " +option); 
     //return false; 
    });  


$(window).bind('hashchange', function(event) { 
    alert('Hello'); 
    // get options object from hash 
    var hashOptions = $.deparam.fragment(); 
    console.log(hashOptions); 
    // apply options from hash 
    $('#leftMenu span a').isotope(hashOptions); 
}) 
// trigger hashchange to capture any hash data on init 
.trigger('hashchange'); 

다음 코드를 사용하여 내 프로젝트를 연결. 그러나 그것은 필터가 아닙니다.

경고를받을 수 있습니다 ('안녕하세요').

어떤 아이디어 ??

답변

2

해결책을 찾았습니다. 내 js 코드에서 오류가 발생했습니다.

여기에 내가 $container.isotope(hashOptions); 메뉴 항목에 다스 려 것을 문질러서 코드

$container.isotope({}); 


    $('#leftMenu span a').click(function() { 
     // get href attr, remove leading # 
     var href = $(this).attr('href').replace(/^#/, ''), 
     // convert href into object 
     // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' } 
     option = $.deparam(href); 
     // set hash, triggers hashchange on window 
     $.bbq.pushState(option); 
     return false; 
    }); 



    $(window).bind('hashchange', function(event) { 
     // get options object from hash 
     var hashOptions = $.deparam.fragment(); 
     // apply options from hash 
     $container.isotope(hashOptions); 
    }) 
    // trigger hashchange to capture any hash data on init 
    .trigger('hashchange'); 

하지만 실제로는 결과 컨테이너를 말합니다.

관련 문제