yii CTabView空内容

Question

如果我有空白的标签内容，我该如何隐藏空白区域？

Answer 1

空区域是Yii CTabView使用的默认CSS的结果。具体来说，来自Yii的web/js/source/jquery.yiitab.js来自CSS：

.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));

最佳解决方案是从CustomTabView派生自己的小部件CTabView，并覆盖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;
}