3

1つのページに2つのカルーセルを配置しようとしていますが、それぞれがタブ付きナビゲーションの異なるパネルにありますが、機能していません。jCarouselスクリプトのトラブルシューティングを試みましたが、タブとjCarouselスクリプトが相互作用すると問題が発生すると思います。

とにかく、私のHTMLは多かれ少なかれこのようなものです：

<div id="myTabs">
  <ul><!-- Tabs navigation -->
    <li><a href="#foo">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
  </ul>
  <div id="foo">
    <ul>
      <li><!-- Quite complex content inside each LI, but set width of 255px --></li>
      <!-- Dynamic number of LI. Minimum of 4 items -->
      .
      .
      .
    </ul>
  </div>
  <div id="bar">
    <!-- Another UL, just like #FOO -->
  </div>
</div>

だから、私はタブを適用する必要があり#myTabs、これはコードです：$('#myTabs').tabs()。ULまた、内部のsに#foojCarouselを適用する必要があります。#barこれは、私が使用している呼び出しです。

$('#myTabs > div > ul').jcarousel({
    scroll: 1,
    animation: 'slow',
    wrap: 'circular'
});

最初のパネルのカルーセルは正しく作成されています。そこではすべてがスムーズに進みます。1つのタブをクリックして非表示のパネルを表示すると、問題が発生します。カルーセルナビゲーションが機能せず、コンソールがエラーをスローします。"jCarousel: No width/height set for items. This will cause an infinite loop. Aborting... "

ただし、プロパティitemFallbackDimensionをに設定しようと255pxするULと、非表示のパネルの幅が。になり510pxます。これは正確に2つの要素の幅ですLIが、ULには少なくとも4つあります。したがって、ナビゲーションは機能しますが、レイアウトは完全に壊れています。（画像を参照）

これらの問題は、タブの非表示のパネルでのみ発生します。これは、jCarouselが内部的に'幅innerWidth()を計算するメソッドに依存しているが、コンテナがに設定されている場合に返されるためだと思います。これは、タブがパネルを非表示にするために行うことです。UL0display: none

どうすれば修正できますか？

4

1 に答える 1

3

バージョン1.8.x以下のjQueryUIを使用している場合、ソリューションはかなり単純です。

スタイルシートで.ui-tabs-hideを見つけて、次のようにします。

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

また、選択したパネルに問題がある場合は、これが存在することを再確認してください。

.ui-tabs .ui-tabs-panel{
    left:0;
}

jQuery UIのcssはdisplay：noneです。そして、それがあなたが説明している問題の原因です。カルーセルプラグインはサイズを決定する必要がありますが、display：noneが適用されている場合、サイズは0x0です。

注：何らかの理由で、jQuery1.9はこれをわずかに変更しました。非アクティブなパネルにui-tabs-hideを追加しなくなりました。すでに1.9を使用していて、何らかの理由で1.8に戻れない場合は、お知らせください。その解決策をお手伝いします（入力に時間がかかり、1.8以前を使用していると思います）。 。

于 2012-11-15T18:55:42.527 に答える