Question

我正在尝试在一个页面中放置两个轮播，每个轮播位于选项卡式导航的不同面板中，但它不起作用。我正在尝试对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()。我还需要将jCarousel应用于UL和#foo内的#bar，这就是我正在使用的调用：

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

正确创建第一个面板中的轮播。一切顺利。单击一个选项卡以显示隐藏面板时会出现问题：轮播导航不起作用，控制台抛出错误"jCarousel: No width/height set for items. This will cause an infinite loop. Aborting... "

但是，当我尝试将属性itemFallbackDimension设置为255px时，会发生的情况是隐藏面板的UL接收宽度510px。这正是两个LI元素的宽度，但UL中至少有4个。因此，虽然现在导航工作，但布局完全被打破。（see image）

这些问题只发生在选项卡的隐藏面板中。我认为这是因为jCarousel内部依赖innerWidth()方法计算UL的宽度，但当容器设置为0时返回display: none - 这正是什么标签可以隐藏面板。

我该如何解决？

Answer 1

如果您使用的是1.8.x或更低版本的jQuery UI，那么解决方案非常简单。

在你的样式表中找到.ui-tabs-hide并使它看起来像这样：

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

如果您对所选面板有任何问题，请仔细检查这是否存在：

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

来自jQuery UI的css是display：none。这就是你所描述的问题所引起的。 carousel插件需要确定尺寸，但是当显示：none时，尺寸为0 x 0。

注意：出于某种原因，jQuery 1.9稍微改变了这一点。它不再将ui-tabs-hide添加到非活动面板。如果你已经使用1.9，并且由于某种原因无法回到1.8请告诉我，我会帮助你解决这个问题（键入的时间要长得多，而且我猜你使用的是1.8或更早版本）

jCarousel + jQuery UI选项卡问题：隐藏的面板列表宽度计算不正确

1 个答案: