警予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; 
}