1

我有一个使用 jQuery UI 选项卡的页面。当页面加载时，我启动了一个 setTimeout，它每 100 毫秒发出一个 ajax 请求，以获取每个选项卡内容的 HTML。此 HTML 的一部分是<div>用于 jqPlot 图表和生成它的脚本。

我遇到的问题是 jqPlot 脚本似乎不喜欢选项卡 2 .. n 上的元素在尝试构建图表时被隐藏。第一个选项卡上的图表看起来很好，但所有其他选项卡上的图表永远不会被构建。

我可以通过等待调用每个选项卡$.jqplot的show事件来解决问题，但是在显示选项卡之前图表不会构建，因此用户在 JS 构建图表时会遇到一点延迟。

是否有一种方法可以在隐藏选项卡时获取JQPLOT来构建这些图表？

4

1 回答 1

1

一些想法：

  1. 在选项卡区域上放置一个哑光 div 以将其隐藏（绝对位置，z-index 9999）
  2. 渲染所有图表
  3. 图表完全渲染后，然后运行 ​​jquery-ui 选项卡（隐藏除一个渲染图表之外的所有图表）
  4. 去除磨砂，露出标签
  1. 生成高度和宽度为零的 div 并隐藏溢出
  2. 在该 div 中为每个选项卡放置一个非常大的 div
  3. 在那些隐藏的 div 中渲染图表
  4. 同时生成您的 jquery ui 选项卡
  5. 将渲染的图表移动到选项卡中
  1. 在每个选项卡中放置一个 iframe，并在单独的 html 页面上呈现图表
  2. 这样每个 iframe 都会执行，无论是否可见，并且 jquery-ui 选项卡可以切换为完全异步渲染的图表
  1. 使用转换将您的 html 移出舞​​台左侧
  2. 先渲染图表
  3. 图表完全渲染后，然后运行 ​​jquery-ui 选项卡（隐藏除一个渲染图表之外的所有图表）
  4. 通过删除变换将元素移回
  1. 使用 node.js 在服务器端生成 jqplot 输出
  2. 在您的页面中包含输出
  3. 运行 jquery 选项卡
于 2013-03-08T19:46:35.830 回答