0 follower

CTabView

Package system.web.widgets
Inheritance class CTabView » CWidget » CBaseController » CComponent
Since 1.0
Version $Id$
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.


For example, the tabs property can be configured as follows, 
array(
    'tab1'=>array(
          'title'=>'tab 1 title',
          'view'=>'view1',
    ),
    '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

PropertyTypeDescriptionDefined 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 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 id of the widget. CWidget
owner CBaseController owner/creator of 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

MethodDescriptionDefined 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
getController() Returns the controller that this widget belongs to. CWidget
getEventHandlers() Returns the list of attached event handlers for an event. CComponent
getId() Returns id of the widget. CWidget
getOwner() Returns owner/creator of this widget. It could be either a widget or a controller. 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 id of the widget. CWidget
widget() Creates a widget and executes it. CBaseController

Protected Methods

Hide inherited methods

MethodDescriptionDefined 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.
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#142 (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 (available since v1.0.2)
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#158 (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#185 (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'];
        else if(isset($tab['view']))
            $this->getController()->renderPartial($tab['view'],$this->viewData);
        echo "</div><!-- {$id} -->\n";
    }
}

Renders the body part.

renderHeader() method
protected void renderHeader()
Source Code: framework/web/widgets/CTabView.php#169 (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#115 (show)
public function run()
{
    if(empty($this->tabs))
        return;

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

    $htmlOptions=$this->htmlOptions;
    $htmlOptions['id']=$this->getId();
    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.