0

我目前正在开发一个用户导航侧面板，它是一个链接列表，我打算找出的是：是否可以突出显示/强调在用户一直被重定向后单击的列表项使用所有视图的默认布局文件相同？我对 CakePHP 和 MVC 设计完全陌生，因此非常感谢任何帮助。

4

2 回答 2

0

您可以使用 JavaScript 执行此操作。这是一个例子。这是在 2.x 中，但没有理由不能在 3.x 中使用它

为简洁起见，我只包含了一个小菜单摘录

菜单.ctp

<script>
    var controllerLocation = '<?php echo $this->params['controller']; ?>';
</script>

<div id="menuWrapper">
    <ul id="menuBar" class="topmenu">
        <input type="checkbox" id="css3menu-switcher" class="switchbox">
        <label onclick="" class="switch" for="css3menu-switcher"></label>
        <li class="topfirst">
            <?php
                echo $this->Html->link(
                    $this->Html->image('menu/contact_32.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('Contacts'),
                    array('controller' => 'contacts', 'action' => 'index'),
                    array('escape' => false, 'id' => 'menu-contacts'));
            ?>

        </li>
        <li class="topmenu">
            <?php
                echo $this->Html->link(
                    $this->Html->image('menu/asset_32.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('Assets'),
                    array('controller' => 'assets', 'action' => 'index'),
                    array('escape' => false, 'id' => 'menu-assets'));
            ?>
        </li>
        <li class="topmenu"><?php
                echo $this->Html->link(
                    $this->Html->image('menu/tasks.png', array('width' => '20', 'line-height' => '20'))
                    . ' ' . __('Tasks'),
                    array('controller' => 'tasks', 'action' => 'index'),
                    array('escape' => false, 'id' => 'menu-tasks'));
            ?>
        </li>
        ......
    </ul>
</div>

如您所见，每个菜单元素都有一个特定的 id 附加到它上面，并且我还声明了 javascript 中的变量来定义当前控制器。

接下来，我有一个 javascript 文件，它检查当前控制器和操作，并添加一个类，任何元素被按下。

脚本文件

$(document).ready(function () {
    switch (controllerLocation) {
        case 'contacts':
            $("#menu-contacts").addClass("pressed");
            break;
        case 'assets':
            $("#menu-assets").addClass("pressed");
            break;
        case 'activities':
            $("#"+controllerLocation).addClass("pressed");
            break;
        case 'tasks':
            if(action == 'calendar_view'){
                $("#menu-calendar").addClass("pressed");
            }
            else $("#menu-tasks").addClass("pressed");
            break;
        case 'mailshots':
            $("#"+controllerLocation).addClass("pressed");
            break;
        case 'webrequests':
            $("#menu-web-requests").addClass("pressed");
            break;
        case 'opportunities':
            $("#"+controllerLocation).addClass("pressed");
            break;
        default:
            $("#admin").addClass("pressed");
    }
});

css 中的pressed类为元素添加样式，使其看起来与其他元素不同

CSS 文件

ul#menuBar li a.pressed {
    background-color: #ff920a;
    border-color: #ff920a;
}

您可以将这些原则应用于您自己的解决方案。这也可以在纯 php 中完成，但这是我实现的一个示例

于 2016-07-21T11:26:23.367 回答
0

您可以在控制器中的方法中添加一个参数，指示单击并设置了哪个链接。像这样的东西：

public ControllerMethod($clickedLink = null) {
    // controller logic
    $this->set(compact('clickedLink'));
}

如果您使用 Cakephp Helper 在控制器中创建了链接：

echo $this->Html->link('LinkName', array(($clickedLink == $idOfThisLink) ? 'class' => 'link-clicked' : '', 'controller' => 'ControllerName', 'action' => 'ActionName', 'linkId');

// ActionName后面的linkId是点击链接时传给控制器的参数

并使用您喜欢的样式将类链接单击添加到您的 css 中。

于 2016-07-22T18:15:06.477 回答