Yii Framework 开发教程(17) UI 组件 TabView示例

你的名字 2023-10-16 19:16 4阅读 0赞

CTabView 用来显示分页标签，使用TabView的基本方法是配置tabs属性，每个Tab可以配置如下属性

*  title:标签标题.
 *  content: 标签显示内容.
 *  view: 标签显示View的名称，如果同时制定Content，则显示Content内容。
 *  url: 点击该标签时页面重定向到指定URL.
 *  data: 当指定View属性时传给该View的属性数组.

本例显示三个标签页，分别使用不同的标签内容：

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <div class="form">
2.  <?php $form=$this\->beginWidget('CActiveForm'); ?>
3.  
4.  <?php $this\->widget('CTabView',array(
5.  'activeTab'=>'tab2',
6.  'tabs'=>array(
7.  'tab1'=>array(
8.  'title'=>'Static tab',
9.  'content'=>'Content for tab 1'
10. ),
11. 'tab2'=>array(
12. 'title'=>'Render tab',
13. 'view'=>'view'
14. ),
15. 'tab3'=>array(
16. 'title'=>'Url tab',
17. 'url'=>Yii::app()->createUrl("site/url"),
18. )
19. ),
20. 'htmlOptions'=>array(
21. 'style'=>'width:500px;'
22. )
23. )); ?>
24. 
25. <div class="row submit">
26. <?php echo CHtml::submitButton('Submit'); ?>
27. </div>
28. 
29. <?php $this\->endWidget(); ?>
30. </div>

<div class="form">
    <?php $form=$this->beginWidget('CActiveForm'); ?>
    
        <?php $this->widget('CTabView',array(
        	'activeTab'=>'tab2',
        	'tabs'=>array(
        				'tab1'=>array(
        					'title'=>'Static tab',
        					'content'=>'Content for tab 1'
        					),
        				'tab2'=>array(
        					'title'=>'Render tab',
        					'view'=>'view'
        					),
        				'tab3'=>array(
        					'title'=>'Url tab',
        					'url'=>Yii::app()->createUrl("site/url"),
        					)
        				),
        			'htmlOptions'=>array(
        				'style'=>'width:500px;'
        				)
        )); ?>
    
        <div class="row submit">
            <?php echo CHtml::submitButton('Submit'); ?>
        </div>
    
    <?php $this->endWidget(); ?>
    </div>

TabView缺省情况下第一个页面为当前页面，可以通过activeTab来修改当前页面，如本例将第二也设为当前页。

[![201212125003][]][201212125003 1]

本例[下载][Link 1]

[view plain]: http://blog.csdn.net/mapdigit/article/details/8434985#
[201212125003]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212125003.png
[201212125003 1]: http://www.imobilebbs.com/wordpress/archives/3990/attachment/201212125003
[Link 1]: http://www.imobilebbs.com/download/yii/TabViewDemo.zip