yii CTab查看空内容

Question

如果选项卡内容为空，如何隐藏空白区域？

Answer 1

空白区域是 Yii

CTabView

使用的默认 CSS 的结果。具体来说，这个 CSS 来自 Yii 源代码中的

web/js/source/jquery.yiitab.js

：

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