Question

我需要在jQuery UI选项卡中使用flexslider。 Here 是指向测试服务器的链接。我不知道有多少个标签，因为它们是用PHP动态创建的。问题是，当我触发flexslider触发器时，它只识别第一个选项卡中的图像。其他选项卡中的图像显示宽度为0，因为隐藏了其他选项卡，并且flexslider无法使用图像进行数学计算。简单的解决方案是使用off-left-technique，但在我使用的jquery-ui-1.9.1中不推荐使用ui-tabs-hide类。使用WordPress 3.5.1回滚到1.8冲突，我也碰巧使用它。因此，我看到的唯一解决方案是在每个选项卡激活时触发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。就是它=）

Flexslider在jQuery UI动态标签中

1 个答案: