jquery同位素散列歷史與jQuery燒烤

我正在玩isotope進行篩選，這是偉大的。當用戶點擊其中一個圖像時，它會顯示一個不同的頁面（詳細信息頁面），但用於過濾它的菜單仍然存在。現在我想要的是，當用戶再次點擊其中一種可能性時，他回到主頁面，但已經過濾結果。jquery同位素散列歷史與jQuery燒烤

我已經閱讀此頁（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');

我沒有得到任何錯誤。但它不是過濾器。

我可以得到警報（'你好'）。

任何想法??

來源

2012-09-06 peterK

我找到了解決方案。我的js代碼有錯誤。

這裏的代碼

$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');

我因子評分的$container.isotope(hashOptions);是指的菜單項，但在現實中，它指的是結果容器。

來源

2012-09-09 18:55:40 peterK

jquery同位素散列歷史與jQuery燒烤

回答

相關問題