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 与用于静态选项卡的 HTML 略有不同：指向现有资源的链接列表（从那里加载内容）并且根本没有其他容器（不引人注目！）。

所以我会建议你让控件select的所有事件变得更容易和使用。tabs

于 2010-05-18T17:33:49.233 回答