CTabView
Package | system.web.widgets |
---|---|
Inheritance | class CTabView » CWidget » CBaseController » CComponent |
Since | 1.0 |
Source Code | framework/web/widgets/CTabView.php |
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'=>'http://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
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
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
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'=>'http://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() |
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. |
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() |
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() |
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() |
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);
list($this->activeTab, )=each($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.
© 2008–2017 by Yii Software LLC
Licensed under the three clause BSD license.
http://www.yiiframework.com/doc/api/1.1/CTabView