代码之家 › 专栏 › 技术社区 › tobiasmay

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

bind jquery-plugins plugins jquery

tobiasmay · 技术社区 · 14 年前

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

我的问题来了:

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

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

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

1) smoothdivscroll插件提供了一个公共方法来重新计算容器的宽度,如

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

以后每次我都要开枪 portfolio-list a 被点击。我需要将其与滑块自动切换到当前内容的第一个元素的方法结合起来

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

2) 我的第二个想法是——因为我不知道是否或如何工作——检查url是否更改,然后启动重新计算。筛选器使用哈希来寻址内容。所以我想我可以读取url,每次散列更改后直接读取部分时,我都可以启动该方法。

3) 我可以将可过滤插件绑定到smoothDivScroll插件,方法如下(小心完全错误的代码:)

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

jsfiddle.net/tobiasmay/QudtF/

谢谢, 托比。

3 回复 | 直到 14 年前

Joel Purra 12 年前

你可以听这个活动 filterportfolio ,并从此处重新计算/移动元素。

$("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。当重现问题中的步骤时,应该立即生效:向右滚动,单击过滤器。

编辑: 由于过滤中的动画, .smoothDivScroll(...) 需要打电话动画完成了。因为如果只调用一次动画可能看起来有点难看,所以在 duration 毫秒 interval 毫秒之间。

Giovanni Bitliner 12 年前

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

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

Lokesh Yadav 13 年前

这是我对这个问题的看法。

您可以尝试第二个选项:捕获哈希更改事件

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