【发布时间】:2016-07-21 07:24:39
【问题描述】:
我目前正在开发一个用户导航侧面板,它是一个链接列表,我打算找出的是:是否可以突出显示/强调在用户被重定向后单击的列表项同时为所有视图使用相同的默认布局文件?我对 CakePHP 和 MVC 设计完全陌生,因此非常感谢任何帮助。
【问题讨论】:
标签: cakephp cakephp-3.2
我目前正在开发一个用户导航侧面板,它是一个链接列表,我打算找出的是:是否可以突出显示/强调在用户被重定向后单击的列表项同时为所有视图使用相同的默认布局文件?我对 CakePHP 和 MVC 设计完全陌生,因此非常感谢任何帮助。
【问题讨论】:
标签: cakephp cakephp-3.2
您可以在控制器中的方法中添加一个参数,以指示单击了哪个链接并进行设置。 像这样的:
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。
【讨论】:
您可以使用 JavaScript 做到这一点。这是一个例子。这是在 2.x 中,但没有理由不能在 3.x 中使用它
为简洁起见,我只包含了一个小菜单摘录
Menu.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 中完成,但这是我实现的一个示例
【讨论】: