CTabView

Tab view concept is most used one in web application. Yii supports two types of tabs. They are CJuiTabs and CTabView. CJuiTab is advanced one. CTabview is simple one.

In this post, we will create the tabs using CTabview. It is simple, less properties compare to cjuitabs.

CTabview is used to show the content in more than one tabs. When we click on the tab, That tab will activate and will the content of selected tabs. We can see only one tab content at a time.
Tab are showed as array of parameters.

Tabs Array Property

title  : Tab Title
content: Display content inside tab
view   : view file name. The file content will display inside tab
data   : data will password to view file
url    : When click on url tab, the site will redirect to url.

Set activeTab

Normally when we click on tab, That tab will get activated. We can set the default activated tab on page load using "activeTab" properties.

Change cssFile

CTabView is having the default style. If we want we can assign new css file for tab view. 'cssFile' property is used to change default css file to customized file.

Assign htmlOption, id

Using htmlOption we can assign inline style for tab view.'id' property used to set id for tabview

Sample CTabView Code

create view1.php file and add some content for "View Content" tab.

<?php
$this->widget('CTabView', array(
    'tabs'=>array(
        'tab1'=>array(
            'title'=>'DirectContent',
            'content'=>'Content was placed directly..',
        ),
        'tab2'=>array(
            'title'=>'View Content',
            'view'=>'view1',
            //'data'=>array('model'=>$model),
        ),
        'tab3'=>array(
            'title'=>'Link To Other Site',
            'url'=>'http://www.bsourcecode.com/',
        ),
    ),
    'activeTab'=>'tab2',
    'cssFile'=>Yii::app()->baseUrl.'/css/jquery.yiitab.css',
    'htmlOptions'=>array(
        'style'=>'',
        ),
    'id'=>'Tab-Id'    
));
?>