CTabView
包 | system.web.widgets |
---|---|
继承 | class CTabView » CWidget » CBaseController » CComponent |
可用自 | 1.0 |
源码 | 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.
公共属性
属性 | 类型 | 描述 | 被定义在 |
---|---|---|---|
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 |
公共方法
方法 | 描述 | 被定义在 |
---|---|---|
__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 |
受保护的方法
方法 | 描述 | 被定义在 |
---|---|---|
renderBody() | Renders the body part. | CTabView |
renderHeader() | Renders the header part. | CTabView |
属性详情
the ID of the tab that should be activated when the page is initially loaded. If not set, the first tab will be activated.
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.
additional HTML options to be rendered in the container tag.
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/', ), )
the data that will be passed to the partial view rendered by each tab.
方法详情
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.
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.
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.
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.
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);
$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.