jQuery UI 动态选项卡中的 Flexslider

Question

我需要 jQuery UI 选项卡中的 flexslider。 Here 是测试服务器的链接。我不知道我有多少个选项卡，因为它们是用 PHP 动态创建的。问题是当我触发 flexslider 触发器时，它只识别第一个选项卡中的图像。其他选项卡中的图像显示宽度为 0，因为其他选项卡被隐藏并且 flexslider 无法对图像进行数学运算。简单的解决方案是使用 off-left-technique 但 ui-tabs-hide 类在我正在使用的 jquery-ui-1.9.1 中已弃用。回滚到 1.8 与我碰巧使用的 WordPress 3.5.1 冲突。所以我看到的唯一解决方案是在每个选项卡激活时触发 flexslider。所以我就是这样做的：

首先我在页面上的所有库和图像加载后触发 flexslider：

$(window).load(function() {
    $('.flexslider-doors').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 64,
        itemMargin: 30,
        controlNav: false
    });

});

然后在每个选项卡激活时我再次触发 flexslider：

jQuery( "#colorTabs" ).tabs({
    activate: function( event, ui ) {
        jQuery('.flexslider-doors').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 64,
            itemMargin: 30,
            controlNav: false
        });
    }
});

问题是它只在我第一次切换标签时才有效。第二次图像不出现。有趣的是，例如，如果我去另一个网站或打开 Photoshop 或其他东西，然后返回损坏选项卡上的图像在它们的位置，并且滑块按预期工作。切换到另一个标签 - 没有图像。去另一个网站做同样的事情 - 一切都修复了。我卡住了=(

http://print-copy74.ru/test/catalog/line-5000/

Answer 1

终于解决了这个问题。不知道问题出在哪里，但这就是我所做的： 首先，我像往常一样触发 jquery ui 标签：

jQuery( "#colorTabs" ).tabs();

然后我只在第一个选项卡上触发 flexslider，所以当页面加载时，滑块可以作为魅力：

jQuery('#tabs-1 .flexslider-doors').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 64,
    itemMargin: 30,
    controlNav: false
});

魔法在那之后开始：

jQuery('#colorTabs').bind('tabsshow', function(event, ui) {
    var index = ui.index +1;
    var tab = "#tabs-" + index + " .flexslider-doors";
    if ( index > 1 ) { 
        jQuery( tab ).flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 64,
            itemMargin: 30,
            controlNav: false
        });
    }
});

在每个选项卡更改时，我获取选项卡索引，添加 1，因此第一个选项卡是 1 而不是 0，然后我构造包含选项卡 ID 和 flexslider 类的字符串，最后我只在当前选项卡上触发 flexslider。就是这样=)