1

我需要 jQuery UI 选项卡中的 flexslider。这是测试服务器的链接。我不知道我有多少个选项卡，因为它们是用 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/

4

1 回答 1

2

终于解决了这个问题。不确定问题出在哪里，但这就是我所做的：首先我像往常一样触发 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。就是这样=)

于 2013-01-31T11:02:58.873 回答