6

divを使用してul/liリストにデータを入力し、そこからjCarouselを描画しています。したがって、これは正常に機能します。

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

ここに問題があります：

ul / liアイテムを含むdivは、別のボタンをクリックすると非表示になります。divが非表示になっていて、ブラウザウィンドウのサイズを変更すると、jCarouselもそれ自体を再描画しようとしますが、非表示になっているため、正しく描画できません。その結果、リスト内のすべてが乱雑になります（ボタンをもう一度クリックして表示すると）。しかし、ここでもウィンドウのサイズを変更すると（ごちゃごちゃしたjCarouselは非表示になりません）、正しく再描画されます。

jCarouselインスタンスを取得し、ボタンがクリックされてdivが表示されるようになったらすぐにリロードしてみました（表示されているときにウィンドウのサイズが変更されたときにサイズが変更される方法）。

jCarouselを入手するために、私は以下を使用しています。

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

そしてそれはnullとして返されます。

jCarouselを正しく描画するにはどうすればよいですか？

4

2 に答える 2

6

$().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 が所定の位置にジャンプします。

ここにもう少し情報があります。

于 2010-04-28T16:45:37.260 に答える
3

もう少しデバッグすると、ブラウザーのサイズが変更されると (そしてカルーセルが既に表示されている場合)、そのリロード関数が呼び出されてその位置が調整されることがわかりました。ラッピング div が表示された後。

jcarousel インスタンスを実際に取得するのに少々手間がかかりました。つまり、2段階のプロセスでした...

  1. カルーセル インスタンスを取得します。

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

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

    });

  2. divのショーでカルーセルをリロードします

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