装载海军报图不能完全解决问题

Question

有已知问题的jQuery的标签，是不是初始可见的标签在这里装载海军报图：

这是在这里问： 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

，你需要记住的主要事情是body标签结束前，将您的js标签右侧。

Answer 3

另外，更改选项卡内容类的CSS ...

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

...并添加以下添加的行（下// HACK !!! ...）到你的JScript js文件..

$(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看起来像......

<div id="tabs" > 
         <ul id="Ul1" > 
           <li class="active"><a href="#tab1">Main</a></li> 
           <li><a href="#tab2">tab2</a></li> 
           <li><a href="#tab3">tab3</a></li> 
           <li><a href="#tab4">tab4</a></li> 
           <li><a href="#tab5">tab5</a></li> 
          </ul> 
     </div> 

     <div style="width:100%;float:left;">  
        <div id="tabs_content_container"> 

          <div id="tab1" class="tab_content" style="visibility:visible"> 
          content for tab 1 
          </div> 
          <div id="tab2" class="tab_content" > 
          </div> 
        </div> 
     </div> 

...您的海军报图将显示CORRE并且当相关标签被选中时！