jquery-ui - 通过ajax方法在jquery ui选项卡内容中加载谷歌注释图表

Question

我在尝试通过 ajax 方法 ( http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html ) 使用内容在 jquery ui 选项卡中加载 google 带注释的图表 ( 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>

Answer 1

HTML 中间有 JavaScript，因此脚本会在 html 页面加载之前开始运行，直到最后以及加载 Google 可视化 API 之前。

此外，我发现将 jQuery UI 选项卡与通过 ajax 加载的内容一起使用的想法不适合您的情况。在页面http://jqueryui.com/demos/tabs/#ajax您可以阅读以下内容:

The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!).

因此，我建议您使用 tabs 控件的 select 事件来简化一切。