包 | system.web.widgets |
---|---|
继承 | class CTabView » CWidget » CBaseController » CComponent |
源自 | 1.0 |
版本 | $Id: CTabView.php 3515 2011-12-28 12:29:24Z mdomba $ |
源码 |
CTabView在多个选项卡中显示内容。
在任意时刻,只有一个选项卡可见。用户可以点击选项卡头部的标签 以选择查看其他选项卡的内容。
JavaScript被用来控制选项卡之间的切换。如果JavaScript被禁用, CTabView也会尽可能地以一种适当的方式来显示内容。
配置tabs属性以指定要管理的选项卡的内容和结构。 tabs取得一个由多个ID和内容映射已定义的选项卡组成的数组。 每个选项卡的定义是一个如下所示的结构的数组:
示例:tabs可以如下进行配置:
默认情况下,第一个选项卡将被激活。如果希望第一次载入页面时激活 另一个选项卡,可以设置activeTab为希望激活的选项卡的ID。
在任意时刻,只有一个选项卡可见。用户可以点击选项卡头部的标签 以选择查看其他选项卡的内容。
JavaScript被用来控制选项卡之间的切换。如果JavaScript被禁用, CTabView也会尽可能地以一种适当的方式来显示内容。
配置tabs属性以指定要管理的选项卡的内容和结构。 tabs取得一个由多个ID和内容映射已定义的选项卡组成的数组。 每个选项卡的定义是一个如下所示的结构的数组:
- title:选项卡的标题。
- content:需要在选项卡中显示的内容。
- view:需要在此选项卡中显示的视图的名字。 此视图将使用当前控制器的CController::renderPartial 方法进行渲染。 如果同时指定了“content”和“view”,“content”将被优先采用。
- url: 当点选此选项卡时用户浏览器将被重定向到此URL。
- data: 数组 (name=>value),当“view”被设定时此数组将被传递到视图中。
示例: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/', ), )
默认情况下,第一个选项卡将被激活。如果希望第一次载入页面时激活 另一个选项卡,可以设置activeTab为希望激活的选项卡的ID。
公共属性
属性 | 类型 | 描述 | 定义在 |
---|---|---|---|
actionPrefix | string | actions的ID的前缀。 当微件在CController::actions中声明了 动作提供者,可以为其动作的ID指定前缀以区别 于别的微件或控制器。当微件用于控制器 的视图中时,必须配置同样的前缀。 | CWidget |
activeTab | string | 页面初次载入时激活的选项卡的ID。 如果没有设置,将激活和一个选项卡。 | CTabView |
controller | CController | 返回此微件所属的控制器。 | CWidget |
cssFile | mixed | 此微件使用的CSS文件。默认为null, 表示使用与此微件捆绑的默认CSS文件。 如果此值为false,则不使用CSS文件。其他情况下, 指定的CSS文件将与此微件捆绑。 | CTabView |
htmlOptions | array | 在HTML容器标签中需要渲染的附加HTML选项。 | CTabView |
id | string | 返回此微件的ID。如果需要的话,将生产一个新的ID并将其返回。 | CWidget |
owner | CBaseController | 返回此微件的所有者或创建者。 | CWidget |
skin | mixed | 微件使用的皮肤的名称。默认为“default”。 如果此属性设置为false,微件将不会有皮肤被使用。 | CWidget |
tabs | array | 选项卡的定义。此数组的键是选项卡的ID,
值是相应的选项卡的内容。
数组的值必须是一个数组,此数组由下列元素组成:
|
CTabView |
viewData | array | 传递到局部视图文件中被各个选项卡使用的数据。 | CTabView |
viewPath | string | 返回包含此微件所需的视图文件的路径。 | CWidget |
公共方法
受保护方法
方法 | 描述 | 定义在 |
---|---|---|
renderBody() | 渲染主体部分。 | CTabView |
renderHeader() | 渲染标头部分。 | CTabView |
属性详细
activeTab
属性
public string $activeTab;
页面初次载入时激活的选项卡的ID。 如果没有设置,将激活和一个选项卡。
cssFile
属性
public mixed $cssFile;
此微件使用的CSS文件。默认为null, 表示使用与此微件捆绑的默认CSS文件。 如果此值为false,则不使用CSS文件。其他情况下, 指定的CSS文件将与此微件捆绑。
htmlOptions
属性
public array $htmlOptions;
在HTML容器标签中需要渲染的附加HTML选项。
tabs
属性
public array $tabs;
选项卡的定义。此数组的键是选项卡的ID, 值是相应的选项卡的内容。 数组的值必须是一个数组,此数组由下列元素组成:
- title: 选项卡的标题。你应当确保它是经过HTML编码的。
- content: 需要显示在选项卡中的内容。
- view: 需要在选项卡中显示的视图的名字。 此视图将使用当前控制器的CController::renderPartial 方法进行渲染。 如果同时指定了“content”和“view”,“content”将被优先采用。
- url: 当点选此选项卡时用户浏览器将被重定向到此URL。
- data: 数组 (name=>value),当“view”被设定时此数组将被传递到视图中。 此选项从1.1.1版开始可用。
array( 'tab1'=>array( 'title'=>'tab 1 title', 'view'=>'view1', ), 'tab2'=>array( 'title'=>'tab 2 title', 'url'=>'http://www.yiiframework.com/', ), )
viewData
属性
public array $viewData;
传递到局部视图文件中被各个选项卡使用的数据。
方法详细
registerClientScript()
方法
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);
}
注册必须的CSS和JavaScript。
registerCssFile()
方法
public static void registerCssFile(string $url=NULL)
| ||
$url | string | CSS文件的URL。如果为null,将使用默认CSS文件的URL。 |
public static function registerCssFile($url=null)
{
$cs=Yii::app()->getClientScript();
if($url===null)
$url=$cs->getCoreScriptUrl().'/yiitab/jquery.yiitab.css';
$cs->registerCssFile($url,'screen');
}
注册必须的CSS文件。
renderBody()
方法
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'];
else if(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";
}
}
渲染主体部分。
renderHeader()
方法
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";
}
渲染标头部分。
run()
方法
public void run()
|
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');
}
运行此微件。