API Documentation for Yii 1.1

0 follower

CTabView

Package	system.web.widgets
Inheritance	class CTabView » CWidget » CBaseController » CComponent
Since	1.0
Source Code	framework/web/widgets/CTabView.php

CTabView displays contents in multiple tabs.

At any time, only one tab is visible. Users can click on the tab header to switch to see another tab of content.

JavaScript is used to control the tab switching. If JavaScript is disabled, CTabView still manages to display the content in a semantically appropriate way.

To specify contents and their tab structure, configure the tabs property. The tabs property takes an array with tab ID being mapped tab definition. Each tab definition is an array of the following structure:

title: the tab title.
content: the content to be displayed in the tab.
view: the name of the view to be displayed in this tab. The view will be rendered using the current controller's CController::renderPartial method. When both 'content' and 'view' are specified, 'content' will take precedence.
url: a URL that the user browser will be redirected to when clicking on this tab.
data: array (name=>value), this will be passed to the view when 'view' is specified.

For example, the tabs property can be configured as follows,

$this->widget('CTabView', array(
    'tabs'=>array(
        'tab1'=>array(
            'title'=>'tab 1 title',
            'view'=>'view1',
            'data'=>array('model'=>$model),
        ),
        'tab2'=>array(
            'title'=>'tab 2 title',
            'url'=>'https://www.yiiframework.com/',
        ),
    ),
));

By default, the first tab will be activated. To activate a different tab when the page is initially loaded, set activeTab to be the ID of the desired tab.

Public Properties

Hide inherited properties

Property	Type	Description	Defined By
actionPrefix	string	the prefix to the IDs of the actions.	CWidget
activeTab	string	the ID of the tab that should be activated when the page is initially loaded.	CTabView
controller	CController	Returns the controller that this widget belongs to.	CWidget
cssFile	mixed	the CSS file used for the widget.	CTabView
htmlOptions	array	additional HTML options to be rendered in the container tag.	CTabView
id	string	Returns the ID of the widget or generates a new one if requested.	CWidget
owner	CBaseController	Returns the owner/creator of this widget.	CWidget
skin	mixed	the name of the skin to be used by this widget.	CWidget
tabs	array	tab definitions.	CTabView
viewData	array	the data that will be passed to the partial view rendered by each tab.	CTabView
viewPath	string	Returns the directory containing the view files for this widget.	CWidget

Public Methods

Hide inherited methods

Method	Description	Defined By
__call()	Calls the named method which is not a class method.	CComponent
__construct()	Constructor.	CWidget
__get()	Returns a property value, an event handler list or a behavior based on its name.	CComponent
__isset()	Checks if a property value is null.	CComponent
__set()	Sets value of a component property.	CComponent
__unset()	Sets a component property to be null.	CComponent
actions()	Returns a list of actions that are used by this widget.	CWidget
asa()	Returns the named behavior object.	CComponent
attachBehavior()	Attaches a behavior to this component.	CComponent
attachBehaviors()	Attaches a list of behaviors to the component.	CComponent
attachEventHandler()	Attaches an event handler to an event.	CComponent
beginCache()	Begins fragment caching.	CBaseController
beginClip()	Begins recording a clip.	CBaseController
beginContent()	Begins the rendering of content that is to be decorated by the specified view.	CBaseController
beginWidget()	Creates a widget and executes it.	CBaseController
canGetProperty()	Determines whether a property can be read.	CComponent
canSetProperty()	Determines whether a property can be set.	CComponent
createWidget()	Creates a widget and initializes it.	CBaseController
detachBehavior()	Detaches a behavior from the component.	CComponent
detachBehaviors()	Detaches all behaviors from the component.	CComponent
detachEventHandler()	Detaches an existing event handler.	CComponent
disableBehavior()	Disables an attached behavior.	CComponent
disableBehaviors()	Disables all behaviors attached to this component.	CComponent
enableBehavior()	Enables an attached behavior.	CComponent
enableBehaviors()	Enables all behaviors attached to this component.	CComponent
endCache()	Ends fragment caching.	CBaseController
endClip()	Ends recording a clip.	CBaseController
endContent()	Ends the rendering of content.	CBaseController
endWidget()	Ends the execution of the named widget.	CBaseController
evaluateExpression()	Evaluates a PHP expression or callback under the context of this component.	CComponent
getController()	Returns the controller that this widget belongs to.	CWidget
getEventHandlers()	Returns the list of attached event handlers for an event.	CComponent
getId()	Returns the ID of the widget or generates a new one if requested.	CWidget
getOwner()	Returns the owner/creator of this widget.	CWidget
getViewFile()	Looks for the view script file according to the view name.	CWidget
getViewPath()	Returns the directory containing the view files for this widget.	CWidget
hasEvent()	Determines whether an event is defined.	CComponent
hasEventHandler()	Checks whether the named event has attached handlers.	CComponent
hasProperty()	Determines whether a property is defined.	CComponent
init()	Initializes the widget.	CWidget
raiseEvent()	Raises an event.	CComponent
registerClientScript()	Registers the needed CSS and JavaScript.	CTabView
registerCssFile()	Registers the needed CSS file.	CTabView
render()	Renders a view.	CWidget
renderFile()	Renders a view file.	CBaseController
renderInternal()	Renders a view file.	CBaseController
run()	Runs the widget.	CTabView
setId()	Sets the ID of the widget.	CWidget
widget()	Creates a widget and executes it.	CBaseController

Protected Methods

Hide inherited methods

Method	Description	Defined By
renderBody()	Renders the body part.	CTabView
renderHeader()	Renders the header part.	CTabView

Property Details

activeTab property

public string $activeTab;

the ID of the tab that should be activated when the page is initially loaded. If not set, the first tab will be activated.

cssFile property

public mixed $cssFile;

the CSS file used for the widget. Defaults to null, meaning using the default CSS file included together with the widget. If false, no CSS file will be used. Otherwise, the specified CSS file will be included when using this widget.

htmlOptions property

public array $htmlOptions;

additional HTML options to be rendered in the container tag.

tabs property

public array $tabs;

tab definitions. The array keys are the IDs, and the array values are the corresponding tab contents. Each array value must be an array with the following elements:

title: the tab title. You need to make sure this is HTML-encoded.
content: the content to be displayed in the tab.
view: the name of the view to be displayed in this tab. The view will be rendered using the current controller's CController::renderPartial method. When both 'content' and 'view' are specified, 'content' will take precedence.
url: a URL that the user browser will be redirected to when clicking on this tab.
data: array (name=>value), this will be passed to the view when 'view' is specified. This option is available since version 1.1.1.
visible: whether this tab is visible. Defaults to true. this option is available since version 1.1.11.

array(
    'tab1'=>array(
          'title'=>'tab 1 title',
          'view'=>'view1',
    ),
    'tab2'=>array(
          'title'=>'tab 2 title',
          'url'=>'https://www.yiiframework.com/',
    ),
)

viewData property

public array $viewData;

the data that will be passed to the partial view rendered by each tab.

Method Details

registerClientScript() method

public void registerClientScript()

Source Code: framework/web/widgets/CTabView.php#156 (show)


public function registerClientScript()
{
    $cs=Yii::app()->getClientScript();
    $cs->registerCoreScript('yiitab');
    $id=$this->getId();
    $cs->registerScript('Yii.CTabView#'.$id,"jQuery(\"#{$id}\").yiitab();");

    if($this->cssFile!==false)
        self::registerCssFile($this->cssFile);
}

Registers the needed CSS and JavaScript.

registerCssFile() method

public static void registerCssFile(string $url=NULL)
$url	string	the CSS URL. If null, a default CSS URL will be used.

Source Code: framework/web/widgets/CTabView.php#171 (show)


public static function registerCssFile($url=null)
{
    $cs=Yii::app()->getClientScript();
    if($url===null)
        $url=$cs->getCoreScriptUrl().'/yiitab/jquery.yiitab.css';
    $cs->registerCssFile($url,'screen');
}

Registers the needed CSS file.

renderBody() method

protected void renderBody()

Source Code: framework/web/widgets/CTabView.php#198 (show)


protected function renderBody()
{
    foreach($this->tabs as $id=>$tab)
    {
        $inactive=$id!==$this->activeTab?' style="display:none"' : '';
        echo "<div class=\"view\" id=\"{$id}\"{$inactive}>\n";
        if(isset($tab['content']))
            echo $tab['content'];
        elseif(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";
    }
}

Renders the body part.

renderHeader() method

protected void renderHeader()

Source Code: framework/web/widgets/CTabView.php#182 (show)


protected function renderHeader()
{
    echo "<ul class=\"tabs\">\n";
    foreach($this->tabs as $id=>$tab)
    {
        $title=isset($tab['title'])?$tab['title']:'undefined';
        $active=$id===$this->activeTab?' class="active"' : '';
        $url=isset($tab['url'])?$tab['url']:"#{$id}";
        echo "<li><a href=\"{$url}\"{$active}>{$title}</a></li>\n";
    }
    echo "</ul>\n";
}

Renders the header part.

run() method

public void run()

Source Code: framework/web/widgets/CTabView.php#122 (show)


public function run()
{
    foreach($this->tabs as $id=>$tab)
        if(isset($tab['visible']) && $tab['visible']==false)
            unset($this->tabs[$id]);

    if(empty($this->tabs))
        return;

    if($this->activeTab===null || !isset($this->tabs[$this->activeTab]))
    {
        reset($this->tabs);
        $this->activeTab = key($this->tabs);
    }

    $htmlOptions=$this->htmlOptions;
    if(isset($this->htmlOptions['id']))
        $this->id=$this->htmlOptions['id'];
    else
        $htmlOptions['id']=$this->id;
    if(!isset($htmlOptions['class']))
        $htmlOptions['class']=self::CSS_CLASS;

    $this->registerClientScript();

    echo CHtml::openTag('div',$htmlOptions)."\n";
    $this->renderHeader();
    $this->renderBody();
    echo CHtml::closeTag('div');
}

Runs the widget.

User Contributed Notes 1

#6751

0 0

HOW to Use CTabView inside index ( CListView)

Some times index view is not what you want.
so I have the idea of using tabs inside each item in CListView.
to do that I changed the default index.php of my view:

$this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view_tabs',
	'sortableAttributes'=>array(
            'apellido',
            'apellido_materno',
        ),
));

in the partial view _view_tabs i got:

<?php
$tab1 = 'tab1_'.$data->id;
$tab2 = 'tab2_'.$data->id;
$tab3 = 'tab3_'.$data->id;

$this->widget('CTabView',array(
        'tabs'=>array(
		$tab1 => array(
			'id'=>'tab1_id1',
			'title'=>'Inf. Basica',
			'view'=>'_view_basica',
			'data'=>$data,
		),
		$tab2=>array(
			'title'=>'Inf. Adicional',
			'view'=>'_view_adicional',
			'data'=>$data,
		),
		$tab3=>array(
			'title'=>'Hijos/Alumnos',
			'view'=>'_view_hijos',
			'data'=>$data,
		),
	),
));
?>

So instead of having a hardcoded id for the tab, I get variables one.

each partial view inside every tab, render each one differently.
And I have beautiful tabs inside each CListView !
PS: sorry for my english !

xNicox at Feb 2, 2012, 8:49:51 PM