Yii Framework 开发教程(29) Zii组件-Menu 示例



介绍完Yii数据库接口外，从本篇开始介绍Zii组件，包括列表视图ListView，表格视图GridView，此外还包括一些基于JQuery的UI组件，如AutoComplete,DataPicker, Button, Drag 和 Drop等。

本文介绍Menu菜单用法，CMenu使用Html 列表显示多级菜单，Menu配置通过其属性item来配置，每个菜单项包括三个主要属性

visible 是否可见

active 当前菜单项是否选中，

items 子菜单项。

此外还包括如下属性：

label: 可选，菜单名称，支持使用HTML标记.

url: 可选，点击该菜单转的URL链接

template: 可选，菜单模板

linkOptions: array, 可选，额外的HTML链接属性

itemOptions: array, 可选，额外的显示菜单项的HTML属性。

submenuOptions: array, 可选，额外显示子菜单的HTML属性.

一般可以把Menu定义在Layout布局中，比如本例，修改protected/views/layout/main.php

[php]
view plaincopyprint?

<?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home',
'url'=>array('/site/index')),
array('label'=>'About',
'url'=>array('/site/page',
'view'=>'about')),
array('label'=>'Contact',
'url'=>array('/site/page',
'view'=>'contact')),
array('label'=>'Login',
'url'=>array('/site/login'),
'visible'=>false),
),
)); ?>

<?php $this->widget('zii.widgets.CMenu',array(
		'items'=>array(
					array('label'=>'Home',
						'url'=>array('/site/index')),
					array('label'=>'About',
						'url'=>array('/site/page',
						'view'=>'about')),
					array('label'=>'Contact',
						'url'=>array('/site/page',
						'view'=>'contact')),
					array('label'=>'Login',
						'url'=>array('/site/login'),
						'visible'=>false),
					),
	)); ?>

本例使用CViewAction来显示几个静态页面，静态页面的缺省目录为当前Controller的View目录下的pages子目录，本例在pages目录下创建了两个静态页面about.php, contact.

要使用CViewAction来显示静态页面，需要修改Controller的actions方法：

[php]
view plaincopyprint?

public function actions()
{
return array(
'page'=>array(
'class'=>'CViewAction',
)
);
}

public function actions()
{
	return array(
		'page'=>array(
			'class'=>'CViewAction',
			)
		);
}

此外如果要显示菜单的层次轨迹（breadcrumbs），可以使用Zii组件中的CBreadcrumbs组件，CBreadcrumbs一般配合CMenu使用

[php]
view plaincopyprint?

<?php if(isset($this->breadcrumbs)):?>
<?php $this->widget('zii.widgets.CBreadcrumbs', array(
'links'=>$this->breadcrumbs,
)); ?><!-- breadcrumbs -->
<?php endif?>

<?php if(isset($this->breadcrumbs)):?>
	<?php $this->widget('zii.widgets.CBreadcrumbs', array(
			'links'=>$this->breadcrumbs,
	)); ?><!-- breadcrumbs -->
<?php endif?>

本例使用Yii缺省的CSS，显示结果如下：





如果不使用CSS，显示结果如下：







由此可见，需要同时使用CMenu组件配合合适的CSS才能显示漂亮的菜单。

本例下载