Yii Framework 開發(fā)教程(29) Zii組件-Menu 示例

介紹完 Yii 數(shù)據(jù)庫接口外，從本篇開始介紹 Zii 組件，包括列表視圖 ListView，表格視圖 GridView，此外還包括一些基于 JQuery 的 UI 組件，如 AutoComplete,DataPicker, Button, Drag 和 Drop 等。

本文介紹 Menu 菜單用法，CMenu 使用 Html 列表顯示多級菜單，Menu 配置通過其屬性 item 來配置，每個菜單項包括三個主要屬性

• visible 是否可見
• active 當前菜單項是否選中，
• items 子菜單項。

此外還包括如下屬性：

• label: 可選，菜單名稱，支持使用 HTML 標記.
• url: 可選，點擊該菜單轉(zhuǎn)的 URL 鏈接
• template: 可選，菜單模板
• linkOptions: array, 可選，額外的 HTML 鏈接屬性
• itemOptions: array, 可選，額外的顯示菜單項的 HTML 屬性。
• submenuOptions: array, 可選，額外顯示子菜單的 HTML 屬性.

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

    <?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 來顯示幾個靜態(tài)頁面，靜態(tài)頁面的缺省目錄為當前 Controller 的 View 目錄下的 pages 子目錄，本例在 pages 目錄下創(chuàng)建了兩個靜態(tài)頁面 about.php, contact.

要使用 CViewAction 來顯示靜態(tài)頁面，需要修改 Controller 的 actions 方法：

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

此外如果要顯示菜單的層次軌跡（breadcrumbs），可以使用 Zii 組件中的 CBreadcrumbs 組件，CBreadcrumbs 一般配合 CMenu 使用：

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

本例使用 Yii 缺省的 CSS，顯示結(jié)果如下：

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/29.1.jpg" alt="picture29.1" />

如果不使用 CSS，顯示結(jié)果如下：

http://wiki.jikexueyuan.com/project/yii-development-tutorial/images/29.2.jpg" alt="picture29.2" />

由此可見，需要同時使用 CMenu 組件配合合適的 CSS 才能顯示漂亮的菜單。

本例下載