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

Question

嘿那里..再次需要一些建议:)

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

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

这是我的问题:

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

我在jsfiddle中为你设置了一个简化的例子,你可以在这里体验整个问题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/

谢谢,托比.

PS.我会正确设置链接,但我需要1个声誉点发布超过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 控制台中使用它时，它似乎可以工作。将代码块添加到aks.jsChrome 或在 Chrome 中尝试：转到该站点，打开控制台，粘贴代码并按 Enter 键。重现问题中的步骤时应该立即起作用：滚动到右侧，单击过滤器。

编辑：由于过滤中的动画，需要在动画完成后.smoothDivScroll(...)调用。由于如果只调用一次动画可能看起来有点难看，因此将在几毫秒内进行多次重新计算，中间间隔一毫秒。durationinterval