Yii 2.0高级模板后端的静态菜单

时间:2015-10-31 15:32:24

标签: ajax menu yii2 partial-views yii2-advanced-app

我使用Yii 2.0高级模板,后端想要这样的东西:

enter image description here

左侧的菜单应包含项目,当点击这些项目时,相应的页面将在右侧打开。左侧的菜单应该是静态的,并且在单击项目时不会失去焦点。

这意味着我可能需要使用部分视图?是否有一些扩展/小部件正在做我需要的?我是Yii的新人,所以我真的不知道如何解决这个问题。任何建议或想法将不胜感激。我确定我不是唯一一个在Yii中需要这个,但在谷歌上找不到的东西。

1 个答案:

答案 0 :(得分:1)

我认为最简单的方法是使用布局。您可以使用左侧的菜单和页面其余部分的主页面来定义布局。

这可能是一个布局样本,例如:'mylayout.php'

<?php
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;

/* @var $this \yii\web\View */
/* @var $content string */

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/dfenx.ico" type="image/x-icon" />   
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
    <?php $this->beginBody() ?>
    <div class="wrap">
        <?php
            NavBar::begin([
                'brandLabel' => $this->title = Yii::$app->name ,
                'brandUrl' => Yii::$app->homeUrl,
                'brandOptions' =>[
                    'style' => 'font-family: palatino; font-size:24px;'
                ],
                'options' => [
                    //'class' => 'navbar-inverse navbar-fixed-top',
                    'class' => 'navbar-default navbar-fixed-top',
                ],
            ]);
            $menuItems = [
                ['label' => 'Home', 'url' => ['/site/index']],
                ['label' => 'About', 'url' => ['/site/about']],
                ['label' => 'Contact', 'url' => ['/site/contact']],
            ];
            if (Yii::$app->user->isGuest) {
                $menuItems[] = ['label' => 'Signup', 'url' => ['/user/register']];
                $menuItems[] = ['label' => 'Login', 'url' => ['/user/login']];
            } else {
                $menuItems[] = [
                    'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                    'url' => ['/user/logout'],
                    'linkOptions' => ['data-method' => 'post']
                ];
            }
            echo Nav::widget([
                'options' => ['class' => 'navbar-nav navbar-right'],
                'items' => $menuItems,
            ]);
            NavBar::end();
        ?>

        <div class="container">
        <?= Breadcrumbs::widget([
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
        ]) ?>
            <div class='col-lg-3 col-md-3' >
                    <!-- here your left menu -->
            </div>
             <div class='col-lg-9 col-md-9' >
                <!-- here your content page-->
                <?= $content ?>
            </div>       
        </div>
    </div>

    <footer class="footer">
        <div class="container">
        <p class="pull-left">&copy; Digital FenX <?= date('Y') ?></p>
        <p class="pull-right"><?php // Yii::powered() ?></p>
        </div>
    </footer>

    <?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

在控制器中,您可以设置想要以这种方式使用的布局

public function actionYourAction()
{

   $this->layout = 'mylayout';
   return $this->render(ourView', [
        'model'                 =>$model,
        'dataProvider'                => $provider,
    ]);
}