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烧烤

回答

相关问题