jCarousel 未在隐藏的 div 内绘制

发布于 2024-08-31 00:21:54 字数 533 浏览 4 评论 0原文

我使用 div 填充 ul/li 列表，然后从中绘制 jCarousel。所以这工作正常：

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

问题是：

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

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

为了获取 jCarousel，我使用：

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

并且它返回为 null。

如何让 jCarousel 正确绘制？

原文

I am using a div to populate a ul/li list and then draw a jCarousel out of it.
So this works fine:

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

Here is the problem:

The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.

I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).

To get the jCarousel, I am using:

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

and it is returned as null.

How can I get the jCarousel to draw correctly?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤独难免 2024-09-07 00:21:54

是什么让您假设 $().jcarousel() 调用对 .data() 执行任何操作？无论如何，最好坚持使用插件提供的 API，而不是猜测它在幕后是如何工作的。无论如何，回答你的问题...

问题是，当 div 被隐藏时，它没有高度或宽度。使用“离左技术”而不是隐藏 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 将跳转到位。

此处提供更多信息。

What makes you assume that the $().jcarousel() call does anything with .data()? Better to stick with the API provided by the plugin anyway, rather than guessing at how it works under the hood. Anyway, to answer your question...

The problem is that, when a div is hidden, it has no height or width. Use the "off-left technique" rather than hiding the div, like this:

#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;
}

When you want to show it, use $('#mycarousel').css('position', 'static') to remove the absolute positioning, and the div will jump into place.

A little more info here.

回复收藏 0 原文

绝情姑娘 2024-09-07 00:21:54

稍加调试，发现当浏览器调整大小（并且轮播已经可见）时，会调用其 reload 函数来调整其位置，因此为了在隐藏/显示 div 场景中帮助自己，我最终调用了 carousel api 的 reload 函数包装 div 变得可见后。

需要付出一些努力才能真正获得 jcarousel 实例。
所以这是一个两步过程...

获取轮播实例。

 var cInstance = null;
 cInitCallback = 函数(c){
     c实例 = c;
 };

$('#mycarousel').jcarousel({
        initCallback：cInitCallback，

    });

在div的显示上重新加载轮播
```
 cInstance.reload();
```

Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api's reload function after the wrapping div becomes visible.

a bit of effort was to actually get hold of the jcarousel instance.
so it was a two step process...

get hold of the carousel instance.

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

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

    });