在jquery选项卡中加载flot图表解决方法并不能完全解决问题

在jquery选项卡中加载flot图表存在已知问题,该选项卡不是此处的初始可见选项卡：

这是在这里问的：
http://osdir.com/ml/jQuery/2009-06/msg02284.html

并回答了这个解决方案：

.tabs-hide {
 /*display: none;*/
  position: absolute;
 left: -10000px;
 }

此解决方案仍存在一些问题.

假设flot图表所在的选项卡名称称为#tab-1. jquery选项卡将其放在URL字符串中,这样在加载时最初会起作用,但是如果您尝试向链接中的#tab-1(或URL中的任何选项卡名称)发送URL,则图表将不会可见.有没有人看到一个总是有效的解决方案,包括选项卡也可能在网址中的情况.

解决方法

对我来说,图表在使用#tab-1 URL直接访问特定选项卡时有效,但在图表选项卡最初未激活时则无效.

我通过将图表生成调用包装到选项卡激活(1)来解决了这个问题：

$('#tabs_container').bind('tabsshow',function(event,ui) {
  if (ui.panel.id == "tab-1") {
    $.plot(...)
  }
})

其中’#tabs-container’和’tab-1’被替换为适当的ID. ‘tabsshow’是要绑定的事件的名称.

唯一的缺点是每次显示选项卡时都会再次绘制图表.对我来说,这不是一个大问题,人们可能会通过例如使用一些标志变量只调用$.plot()一次.

(1)：jQuery-ui docs的第二个提示

原文地址：https://www.jb51.cc/jquery/180827.html