YII 类库手册
> YII 类库手册 > CTabView
包 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和内容映射已定义的选项卡组成的数组。 每个选项卡的定义是一个如下所示的结构的数组：
  • 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， 值是相应的选项卡的内容。 数组的值必须是一个数组，此数组由下列元素组成：
  • title: 选项卡的标题。你应当确保它是经过HTML编码的。
  • content: 需要显示在选项卡中的内容。
  • view: 需要在选项卡中显示的视图的名字。 此视图将使用当前控制器的CController::renderPartial 方法进行渲染。 如果同时指定了“content”和“view”，“content”将被优先采用。
  • url: 当点选此选项卡时用户浏览器将被重定向到此URL。
  • data: 数组 (name=>value)，当“view”被设定时此数组将被传递到视图中。
    • 此选项从1.
 CTabView
viewData array 传递到局部视图文件中被各个选项卡使用的数据。 CTabView
viewPath string 返回包含此微件所需的视图文件的路径。 CWidget

公共方法

方法 描述 定义在
__call() 如果类中没有调的方法名，则调用这个方法。 CComponent
__construct() 构造器。 CWidget
__get() 返回一个属性值、一个事件处理程序列表或一个行为名称。 CComponent
__isset() 检查一个属性是否为null。 CComponent
__set() 设置一个组件的属性值。 CComponent
__unset() 设置一个组件的属性为null。 CComponent
actions() 返回此widget使用的动作的列表。 CWidget
asa() 返回这个名字的行为对象。 CComponent
attachBehavior() 附加一个行为到组件。 CComponent
attachBehaviors() 附加一个行为列表到组件。 CComponent
attachEventHandler() 为事件附加一个事件处理程序。 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() 确定属性是否可读。 CComponent
canSetProperty() 确定属性是否可写。 CComponent
createWidget() Creates a widget and initializes it. CBaseController
detachBehavior() 从组件中分离一个行为。 CComponent
detachBehaviors() 从组件中分离所有行为。 CComponent
detachEventHandler() 分离一个存在的事件处理程序。 CComponent
disableBehavior() 禁用一个附加行为。 CComponent
disableBehaviors() 禁用组件附加的所有行为。 CComponent
enableBehavior() 启用一个附加行为。 CComponent
enableBehaviors() 启用组件附加的所有行为。 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() 计算一个PHP表达式，或根据组件上下文执行回调。 CComponent
getController() 返回此微件所属的控制器。 CWidget
getEventHandlers() 返回一个事件的附加处理程序列表。 CComponent
getId() 返回此微件的ID。如果需要的话，将生产一个新的ID并将其返回。 CWidget
getOwner() 返回此微件的所有者或创建者。 CWidget
getViewFile() 根据视图名查找视图文件。 CWidget
getViewPath() 返回包含此微件所需的视图文件的路径。 CWidget
hasEvent() 确定一个事件是否定义。 CComponent
hasEventHandler() 检查事件是否有附加的处理程序。 CComponent
hasProperty() 确定属性是否被定义。 CComponent
init() 初始化此微件。 CWidget
raiseEvent() 发起一个事件。 CComponent
registerClientScript() 注册必须的CSS和JavaScript。 CTabView
registerCssFile() 注册必须的CSS文件。 CTabView
render() 渲染一个视图。 CWidget
renderFile() Renders a view file. CBaseController
renderInternal() Renders a view file. CBaseController
run() 运行此微件。 CTabView
setId() 设置此微件的ID。 CWidget
widget() Creates a widget and executes it. CBaseController

受保护方法

方法 描述 定义在
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');
}

运行此微件。

上一篇：
下一篇：