如何使用CakePHP在菜单链接中添加活动类?

时间:2014-05-16 05:28:46

标签: html5 css3 twitter-bootstrap cakephp

我的default.ctp文件中有一个页面,我想在链接上添加“active”类。如何识别页面的当前URL,然后在链接上应用该类?

我正在使用的识别链接:

<li class="<?php echo (!empty($this->params['action']) &&   ($this->params['action']=='view') )?'active' :'inactive' ?>" >

此处,我所拥有的不同控制器在视图中具有相同的操作链接。我该如何控制这个名字?

            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name"></li>
                    <li class="toggle-topbar menu-icon">
                        <a href="#"><span>Menu</span></a>
                    </li>
                </ul>
                <section class="top-bar-section">
                    <ul class="left">
                        <li>
                            <?php
                            echo $this->Html->link('Home', array('controller' => 'pages', 'action' => 'index'));
                            ?>
                        </li>
                        <li><a href="#">Destinations</a></li>
                        <li >
                            <?php
                            echo $this->Html->link('Hotels', array('controller' => 'hotels', 'action' => 'view'));
                            ?>
                        </li>
                        <li >

                            <?php
                            echo $this->Html->link('Packages', array('controller' => 'packages', 'action' => 'view'));
                            ?>
                        </li>
                        <li >
                            <?php
                            echo $this->Html->link('Search', array('controller' => 'hotels', 'action' => 'search'));
                            ?>
                        </li>
                        <li>
                            <?php
                            echo $this->Html->link('Booking', array('controller' => 'reservations', 'action' => 'reservation'));
                            ?>
                        </li>
                        <li><a href="#">Trains</a></li>
                    </ul>
                </section>
            </nav>

3 个答案:

答案 0 :(得分:2)

这是怎么做的(非常粗糙):

在AppController中:

protected $active_item;
public function beforeRender() {
parent::beforeRender();
$this->set("active", $this->active_item);
}

在控制器中:

$this->active_item = "your_action";

并在视图中:

<li class=" <?php echo (($this->params['action'] = $active ) )?'active_item' :'' ?>">
<?php echo $this->Html->link('...', array('controller' => '...', 'action' =>     'your_action'));?>
</li>

答案 1 :(得分:1)

假设您有一个URL数组(您应该有类似的东西以避免代码重复):

$urls = array(
    array(
        'label' => 'Home',
        'url' => array('controller' => 'pages', 'action' => 'home')
    ),
    array(
        'label' => 'Login',
        'url' => array('controller' => 'users', 'action' => 'login')
    ),
    /* And so one... */
);

然后循环遍历此数组以创建您的菜单,并添加一个测试以添加活动类:

 <ul class="left">
 <?php 
     foreach ($urls as $url) {
         $active = (Router::normalize(Router::url()) === Router::normalize($url['url'])) ? 'active' : '' ;
         echo '<li class="'.$active.'">'.$this->Html->link($url['label'], $url['url']).'</li>' ;
     }
 ?>
 </ul>

答案 2 :(得分:1)

这两个答案都是正确的,但我认为最好将这个逻辑放入帮手。

MenuHelper.php

class MenuHelper extends Helper {

    [...]

    /**
    * Checks the passed parameter about the current controller. If so, return the text to
    * fill the active menu class link. If not, returns null.
    *
    * @param $controller
    * @return null|string
    */
    function activeClass($controller) {
        return $this->request->params['controller'] === $controller ? 'active' : null;
    }
}

在您看来:

<a class="<?php echo $this->Menu->activeClass('some_page') ?>" href="#">PAGE TITLE</a>