裝載海軍報圖不能完全解決問題

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並且當相關標籤被選中時！