yii CTabView пустой контент

Question

как скрыть пустую область, если у меня пустое содержимое вкладки?

Answer 1

Пустая область является результатом CSS по умолчанию, который использует Yii CTabView.В частности, этот 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));

Лучшим решением было бы получить собственный виджет 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;
}