0

バックグラウンド

Django アプリをブートストラップ 3 にアップグレードすることにしました。アコーディオンをパネルに変更した後、以前は機能していた Jqplot が機能しなくなっていることがわかりました。グループとして 3 つのアコーディオンがあり、それぞれに Jqplot スクリプトと、プロットを表示する必要がある div が含まれています。

これは、スケルトンがどのように見えるかです：

<div class="panel-group" id="accordion2">
  <div class="panel panel-default">
    <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
          First Heading
        </a>
       <script>
        $(document).ready(function(){
          // generic jqplot barchart that goes like this...
          // var plot1 = $.jqplot('chartdiv', s1, {...
          });
        </script>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <div id="chartdiv"></div>
        </div>
      </div>
    </div>

他の 2 つの div についても同じことがpanel panel-default言えます。(同じ方法でさらに 2 つのプロットを書きます。)

問題

それはこの行にあります： <div id="collapseOne" class="panel-collapse collapse in">

でパネルを折りたたむと、期待どおりに折りたたまれますが、内部で呼び出されてclass="panel-collapse collapse"もプロットは生成されません。document.ready()

しかし、私がそれを持っているとclass="panel-collapse collapse in"、パネルは折りたたまれず、プロットも生成されます。

質問

デフォルトで最初のパネルを折りたたまず、他の 2 つのパネルを折りたたむ必要がありますが、上記のクラスを使用してそうすると、2 番目と 3 番目のプロットが生成されません (具体的には、Jqplot キャンバスが生成されません)。

これは、古いバージョンを使用していた古いアプリで動作していたため、Bootstrap 3 とそのアコーディオンへの変更と関係があるに違いないと思います。

どうすればこの問題を乗り越えることができますか?

4

1 に答える 1

1

document.ready でプロットを生成するのは正しいことです。折りたたむと、css によってコンテンツが非表示になるだけです。ボタンがクリックされるか、ウィンドウのサイズが変更されるまで、フルカレンダーが表示されませんか? 多分それもあなたを助けるでしょう。

崩壊時にコンテンツを「ライブ」で生成するには、崩壊プラグインのイベントを考慮してください。 http://getbootstrap.com/javascript/#collapse-usageを参照してください。たとえば、 shown.bs.collapse でプロットを生成しようとすることができます。

必ずお読みください: http://learn.jquery.com/using-jquery-core/document-ready/

于 2013-09-30T20:58:24.403 に答える