6

我正在使用一个 div 来填充一个 ul/li 列表，然后从中绘制一个 jCarousel。所以这很好用：

$('#mycarousel').jcarousel();

这是问题所在：

单击另一个按钮可以隐藏包含 ul/li 项的 div。当 div 被隐藏并且我重新调整浏览器窗口的大小时，jCarousel 也会尝试重新绘制自身，但由于它被隐藏，它无法正确绘制它。结果是列表中的所有内容都混乱了（如果我再次单击该按钮使其可见）。但是，如果我现在重新调整窗口大小（现在没有隐藏混乱的 jCarousel），它会正确地重新绘制自己。

我尝试获取 jCarousel 实例并在单击按钮以使 div 可见时立即重新加载自身（当它可见时它重新调整自身大小并且窗口重新调整大小的方式）。

要获得 jCarousel，我正在使用：

JQuery('#mycarousel').data('jcarousel')

它返回为空。

如何让 jCarousel 正确绘制？

4

2 回答 2

6

是什么让您认为该$().jcarousel()呼叫与 有任何关系.data()？无论如何，最好坚持使用插件提供的 API，而不是猜测它是如何工作的。无论如何，回答你的问题......

问题是，当一个 div 被隐藏时，它没有高度或宽度。使用“off-left 技术”而不是隐藏 div，如下所示：

#mycarousel {
    height: 100px; /* whatever height your div will have when shown */
    width: 100px;  /* whatever width your div will have when shown */
    position: absolute:
    left: -10000px;
}

想显示的时候用$('#mycarousel').css('position', 'static')去掉绝对定位，div就会跳到位。

更多信息在这里。

于 2010-04-28T16:45:37.260 回答
3

再调试一点，发现当浏览器调整大小时（并且轮播已经可见），它的reload函数被调用来调整它的位置，所以为了帮助自己在hide/show div场景中，我最终调用了carousel api的reload函数在包装 div 变得可见之后。

一些努力是实际掌握 jcarousel 实例。所以这是一个两步的过程......

  1. 获取轮播实例。

     var cInstance = null;
 cInitCallback = function(c){
     cInstance = c;
 };

$('#mycarousel').jcarousel({
        initCallback: cInitCallback,

    });

  2. 在 div 的节目中重新加载轮播

     cInstance.reload();
于 2010-05-07T17:15:54.617 回答