2

ajaxメソッド ( http :/ /jqueryui.com/demos/tabs/#ajax )。

代わりにデフォルトのタブ機能を使用すると、コードを書き出すとうまくいきます。

<div id="tabs">
   <ul>
       <li><a href="#tabs-1">Chart</a></li>
   </ul>
   <div id="tabs-1">
      <script type="text/javascript"> 
         google.load('visualization', '1', {'packages':['annotatedtimeline']});
         google.setOnLoadCallback(drawChart);

      function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('date', 'Date');
         data.addColumn('number', 'cloudofinc.com');
         data.addColumn('string', 'header');
         data.addColumn('string', 'text')
         data.addColumn('number', 'All Clients');
            data.addRows([
               [new Date('May 12, 2010'), 2, '2 New Users', '', 3],
               [new Date('May 13, 2010'), 0, undefined, undefined, 0],
               [new Date('May 14, 2010'), 0, undefined, undefined, 0],
            ]);

            var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_users'));

            chart.draw(data, {
        displayAnnotations: false, 
        fill: 10,
        thickness: 1
            });
         }
      </script> 
      <div id='chart_users' style='width: 100%; height: 400px;'></div> 
   </div>
</div>

しかし、jquery ui タブに ajax メソッドを使用し、タブのパーシャルをポイントすると、完全には機能しません。ページがレンダリングされ、グラフが読み込まれると、ブラウザー ウィンドウが白くなります。ただし、チャートがレンダリングを終了するように見える直前に、タブが部分的に点滅するのを確認できます (チャートが実際に表示されることはありません)。パーシャルが実際にグラフなしで適切にロードされていることを確認しました。

<div id="tabs">
  <ul>
    <li><a href="ajax/tabs-1">Chart</a></li>
  </ul>
</div>
4

1 に答える 1

1

HTML の途中に JavaScript があるため、HTML ページが最後まで読み込まれる前にスクリプトが実行され、Google ビジュアライゼーション API が読み込まれます。

さらに、jQuery UI タブを ajax 経由でロードされたコンテンツと一緒に使用するという考えは、あなたの場合には良くありません。ページhttp://jqueryui.com/demos/tabs/#ajaxで、以下を読むことができます:

必要な HTML は、静的タブに使用されるものとは少し異なります: 既存のリソース (コンテンツが読み込まれる場所) を指すリンクのリストであり、追加のコンテナーはまったくありません (目立たない!)。

したがって、すべてを簡単にして、コントロールselectのイベントを使用することをお勧めします。tabs

于 2010-05-18T17:33:49.233 に答える