在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，则图表将不会可见。 有没有人看到一个总是有效的解决方案，包括选项卡也可能在url中的情况。

Answer 1

对我来说，图表在使用#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中的第二个提示

Answer 2

或者，将选项卡内容类的css更改为…

 .tab_content { display:block; visibility:hidden; } 

…并在jscript.js文件中添加以下添加的行（在HACK !!! …下）

  $(document).ready(function() { // When user clicks on tab, this code will be executed $("#tabs li").click(function() { // First remove class "active" from currently active tab $("#tabs li").removeClass('active'); //HACK!!! As the tabs_content HAS to initially be set to display:block in order for the flot graphs to be plotted correctly, // we need to manually change the visibility attribute for the tabs_content each time another tab is selected as active. //This assigns a variable to the tab_content of the currently active tab and changes the css visibility attribute to hidden. var old_tab = $("#tabs li").find("a").attr("href"); $(old_tab).css('visibility', 'hidden'); // Now add class "active" to the selected/clicked tab $(this).addClass("active"); // Hide all tab content $(".tab_content").hide(); // Here we get the href value of the selected tab var selected_tab = $(this).find("a").attr("href"); //HACK!!! Change the css visibility attribute of the newly selected tab to visible $(selected_tab).css('visibility', 'visible'); $(selected_tab).fadeIn(); return false; }); }); 

…并提供你的aspx看起来像……

  
 
 
Main
 
tab2
 
tab3
 
tab4
 
tab5
 
 
 
 
 
 content for tab 1 
 
 
 
  

…当您选择相关标签时，您的flot图表将正确显示！

Answer 3

您需要记住的主要事项是将标签js放在body标签结尾之前。