Question

嘿那里......再次需要一些建议：）

我正在开发一个带有可过滤投资组合的项目[基于此插件链接：www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours。

投资组合项目显示在水平滑块中，该滑块在浏览器窗口的左侧和右侧添加滚动区域（热点）。

这是我的问题：

滑块的宽度在插件smoothdivscroller www.smoothdivscroll.com中计算。但是当我通过过滤器导航更改滑块的内容时，滑块的总宽度会发生变化，但smoothdivscroller插件没有注意到它。

我在jsfiddle中为你设置了一个简化的example，你可以在这里体验整个问题kuemmel-schnur.de/projekte：当显示所有项目时（Alle）你向右滚动然后切换到类别“Lehrprojekte”您将看不到任何项目，因为它们位于最左侧，并且不会重新计算容器的总宽度。

为了解决这个问题，我有三个想法，我需要一些认真的帮助。

1）smoothdivscroll插件提供了一种重新计算容器宽度的公共方法，如

$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

我需要在点击portfolio-list a后每次触发。我需要将它与滑块自动切换到当前内容的第一个元素

的方法结合起来

$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");

2）我的第二个想法 - 因为我不知道是否或如何1）工作 - 是检查网址是否改变然后解除重新计算。过滤器使用哈希来寻址内容。所以我想我可以读出网址，每次直接在哈希变化之后的部分我都可以解雇这个方法。

3）我可以将可过滤的插件绑定到smoothDivScroll插件上（比如完全错误的代码:)：

$('#portfolio-list').filterable();
 $('#portfolio-filter a').click(function(){
        $('#makeMeScrollable').smoothDivScroll("moveToElement", "first")("recalculateScrollableArea");
});

所以..你怎么看？再次jsfiddle链接：jsfiddle.net/tobiasmay/QudtF/

感谢， TOBI。

PS。我会正确设置链接，但我需要多一个声望点发布超过1个链接;）

Answer 1

您可以收听活动filterportfolio，然后从那里重新计算/ moveToElement。

$("body").bind("filterportfolio", function()
{
    var
        interval = 50,
        duration = 1000;

    var intervalId = setInterval(function()
    {
        $("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

        duration -= interval;

        if(duration <= 0)
        {
            clearInterval(intervalId);
        }
    }, interval);

    $("#makeMeScrollable").smoothDivScroll("moveToElement", "first");
});

在javascript控制台on the live site中使用它时似乎有效。将代码块添加到aks.js或在Chrome中试用：转到该站点，打开控制台，粘贴代码并按Enter键。在从问题中重现步骤时应该立即工作：向右滚动，点击过滤器。

修改：由于过滤中的动画，动画完成后需要在之后调用 <{1>}。由于动画可能看起来有点难看，如果只调用一次，重新计算将在.smoothDivScroll(...)毫秒内完成几次，其间的duration毫秒。

Answer 2

您可以使用jQuery自定义事件：当它更改滑块的内容时，它会执行

$(document).trigger('contentChange');

并在插件中设置此事件的处理程序

$(document).bind('contentChange', function(){//here the code that changes the width of slider});

Answer 3

以下是我对此问题的看法。

您可以尝试第二种选择：捕获哈希更改事件

$('window').hashChange(function() {
    $('portfolio-list').filterable();
});

这种方法唯一的缺点是：IE7本身不支持hashChange事件。

jquery：从第二个插件更改后触发一个插件的公共方法

3 个答案: