警予CTabView空內容

Question

我怎樣才能隱藏空白區域，如果我有標籤的內容爲空？

Answer 1

空白區域是Yii CTabView使用的默認CSS的結果。具體而言，該CSS從web/js/source/jquery.yiitab.js在Yii的來源：

.yiiTab div.view 
{ 
    border-left: 1px solid #4F81BD; 
    border-right: 1px solid #4F81BD; 
    border-bottom: 1px solid #4F81BD; 
    padding: 8px; 
    margin: 0; 
} 

你可以看到自己這一點，如果你不包含任何CSS可言，在這種情況下，標籤將沒有任何樣式顯示：

$this->widget('CTabView', array('tabs'=> $tabs, 'cssFile' => false)); 

最好的解決辦法是從CTabView派生自己的小部件CustomTabView，並覆蓋renderBody方法是這樣的：

protected function renderBody() 
{ 
    foreach($this->tabs as $id=>$tab) 
    { 
     $inactive=$id!==$this->activeTab?' style="display:none"' : ''; 
     $empty = $this->isEmptyTab($tab) ? ' empty' : ''; 

     echo "<div class=\"view{$empty}\" id=\"{$id}\"{$inactive}>\n"; 
     if(isset($tab['content'])) 
      echo $tab['content']; 
     else if(isset($tab['view'])) 
     { 
      if(isset($tab['data'])) 
      { 
       if(is_array($this->viewData)) 
         $data=array_merge($this->viewData, $tab['data']); 
       else 
         $data=$tab['data']; 
      } 
      else 
       $data=$this->viewData; 
      $this->getController()->renderPartial($tab['view'], $data); 
     } 
     echo "</div><!-- {$id} -->\n"; 
    } 
} 

然後你需要一個isEmptyTab方法。這一個將適用於由你手動設置內容的標籤。如果這還不夠好，擴展它，你需要：

private function isTabEmpty($tab) 
{ 
    if(isset($tab['content']) && $tab['content'] == '') 
    { 
     return true; 
    } 

    return false; 
} 

最後，你需要一些CSS來使你的空卡出現不同的，例如：

.yiiTab div.view.empty 
{ 
    border: none; 
    padding: 0; 
    margin: 0; 
}