3

我正在尝试将两个轮播放在一个页面中，每个轮播都位于选项卡式导航的不同面板中，但它不起作用。我已经尝试对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 应用到ULs 里面#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 个。因此，虽然现在导航可以工作，但布局完全被打破了。（见图）

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

我该如何解决？

4

1 回答 1

3

如果您使用 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。这就是您所描述的问题的根源。轮播插件需要确定尺寸，但当 display:none 应用时，尺寸为 0 x 0。

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

于 2012-11-15T18:55:42.527 回答