Yii Framework 开发教程(41) Zii组件-Tabs示例

清疚 2023-10-16 19:21 8阅读 0赞

CJuiTabs 显示分页UI组件，和[Yii Framework 开发教程(17) UI 组件 TabView示例][Yii Framework _17_ UI _ TabView]功能类似，它封装了 [JUI tabs][]插件。

前基本用法如下：

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

1.  <?php $this\->widget('zii.widgets.jui.CJuiTabs', array(
2.  'tabs'=>array(
3.  'Static tab'=>'Static content',
4.  'Render tab'=>$this\->renderPartial('pages/\_content1',null,true),
5.  'Ajax tab'=>array('ajax'=>array('ajaxContent','view'=>'\_content2')),
6.  ),
7.  'options'=>array(
8.  'collapsible'=>true,
9.  'selected'=>1,
10. ),
11. 'htmlOptions'=>array(
12. 'style'=>'width:500px;'
13. ),
14. )); ?>

<?php $this->widget('zii.widgets.jui.CJuiTabs', array(
    'tabs'=>array(
    	'Static tab'=>'Static content',
    	'Render tab'=>$this->renderPartial('pages/_content1',null,true),
    	'Ajax tab'=>array('ajax'=>array('ajaxContent','view'=>'_content2')),
    	),
    'options'=>array(
    	'collapsible'=>true,
    	'selected'=>1,
    	),
    'htmlOptions'=>array(
    	'style'=>'width:500px;'
    	),
    )); ?>

显示了三个页面不同内容显示方法，Static Tab显示一个静态内容，Render Tab使用Partial渲染一个页面，而Ajax Tab则通过AJAX显示一个页面，注意后面两个需要在SiteController中定义Actions 如下：

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

1.  public function actions()
2.  \{
3.  return array(
4.  'page'=>array(
5.  'class'=>'CViewAction',
6.  ),
7.  // ajaxContent action renders
8.  //"static" pages stored under 'protected/views/site/pages'
9.  // They can be accessed via:
10. //index.php?r=site/ajaxContent&view=FileName
11. 'ajaxContent'=>array(
12. 'class'=>'application.controllers.AjaxViewAction',
13. ),
14. );
15. \}

public function actions()
    {
    	return array(
    		'page'=>array(
    				'class'=>'CViewAction',
    				),
    		// ajaxContent action renders
    		//"static" pages stored under 'protected/views/site/pages'
    		// They can be accessed via:
    		//index.php?r=site/ajaxContent&view=FileName
    		'ajaxContent'=>array(
    				'class'=>'application.controllers.AjaxViewAction',
    			),
    		);
    }

其中AjaxViewAction为一自定义ViewAction，为CViewAction的子类，可以显示静态页面，其定义如下：

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

1.  class AjaxViewAction extends CViewAction
2.  \{
3.  private $\_viewPath;
4.  
5.  public function run()
6.  \{
7.  if(Yii::app()->request->isAjaxRequest)
8.  \{
9.  $this\->resolveView($this\->getRequestedView());
10. $controller=$this\->getController();
11. $controller\->renderPartial($this\->view, null, false, true);
12. \}
13. else
14. throw new CHttpException(400,'Invalid request.
15. Please do not repeat this request again.');
16. \}
17. \}

class AjaxViewAction extends CViewAction
    {
    	private $_viewPath;
    
    	public function run()
    	{
    		if(Yii::app()->request->isAjaxRequest)
    		{
    			$this->resolveView($this->getRequestedView());
    			$controller=$this->getController();
    			$controller->renderPartial($this->view, null, false, true);
    		}
    		else
    			throw new CHttpException(400,'Invalid request.
    		       Please do not repeat this request again.');
    	}
    }

显示结果如下：  
[![201212129010][]][201212129010 1] 本例 [下载][Link 1]

[Yii Framework _17_ UI _ TabView]: http://www.imobilebbs.com/wordpress/archives/3990
[JUI tabs]: http://jqueryui.com/demos/tabs/
[view plain]: http://blog.csdn.net/mapdigit/article/details/8463114#
[201212129010]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212129010.png
[201212129010 1]: http://www.imobilebbs.com/wordpress/archives/4131/attachment/201212129010
[Link 1]: http://www.imobilebbs.com/download/yii/JuiTabsDemo.zip