1

jQueryUIタブにフレックススライダーが必要です。テストサーバーへのリンクは次のとおりです。PHPで動的に作成されるため、タブがいくつあるかわかりません。問題は、フレックススライダートリガーを起動すると、最初のタブの画像のみが認識されることです。他のタブの画像は幅0で表示されます。これは、他のタブが非表示になっていて、flexsliderが画像を計算できないためです。簡単な解決策は、off-left-techniqueを使用することですが、ui-tabs-hideクラスは、私が使用しているjquery-ui-1.9.1では非推奨になっています。1.8にロールバックすると、私も使用しているWordPress3.5.1と競合します。したがって、私が見る唯一の解決策は、タブのアクティブ化ごとにフレックススライダーをトリガーすることです。それが私がすることです：

最初に、ページ上のすべてのライブラリと画像が読み込まれた後、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
        });
    }
});

問題は、タブを初めて切り替えたときにのみ機能することです。2回目の画像は表示されません。そして興味深いのは、たとえば別のWebサイトにアクセスしたり、Photoshopなどを開いてから戻ってきた場合、壊れたタブの画像がその場所にあり、スライダーが期待どおりに機能することです。別のタブに切り替えます-画像はありません。別のウェブサイトに行くことでも同じことをしてください-すべてが修正されました。私は立ち往生しています=（

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

4

1 に答える 1

2

最後に、この問題を修正しました。問題がどこにあるかはわかりませんが、それが私がしたことです。まず、いつものようにjqueryuiタブを起動します。

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

次に、最初のタブでのみフレックススライダーを起動して、ページが読み込まれるときにスライダーがチャームとして機能するようにします。

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を追加して、最初のタブが0ではなく1になるようにします。次に、タブIDとflexsliderクラスを含む文字列を作成し、最後に現在のタブでのみflexsliderを起動します。それだけです=）

于 2013-01-31T11:02:58.873 に答える