有没有办法以编程方式更改布局文件?
Is there a way to programmatically make changes to your layout file?
我目前正在开发一个用户导航侧面板,它是一个链接列表,我想知道的是:是否可以 highlight/emphasize 用户点击后的列表项是否一直在为所有视图使用相同的默认布局文件进行重定向?我对 CakePHP 和 MVC 设计完全陌生,因此非常感谢任何帮助。
您可以使用 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 文件,它检查当前的控制器和动作,并向按下的元素添加一个 class。
脚本文件
$(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
class 为元素添加样式,使其看起来与其他元素不同
CSS 文件
ul#menuBar li a.pressed {
background-color: #ff920a;
border-color: #ff920a;
}
您可以将这些原则应用到您自己的解决方案中。这也可以在纯 php 中完成,但这是我实现的一个示例
您可以在您的控制器中向您的方法添加一个参数,指示单击了哪个 link 并设置它。
像这样:
public ControllerMethod($clickedLink = null) {
// controller logic
$this->set(compact('clickedLink'));
}
如果您使用 Cakephp Helper 在控制器中执行了 links:
echo $this->Html->link('LinkName', array(($clickedLink == $idOfThisLink) ? 'class' => 'link-clicked' : '', 'controller' => 'ControllerName', 'action' => 'ActionName', 'linkId');
// linkActionName后的Id为点击link时传递给控制器的参数
然后将 class link-clicked 添加到您的 css 并使用您喜欢的样式。
我目前正在开发一个用户导航侧面板,它是一个链接列表,我想知道的是:是否可以 highlight/emphasize 用户点击后的列表项是否一直在为所有视图使用相同的默认布局文件进行重定向?我对 CakePHP 和 MVC 设计完全陌生,因此非常感谢任何帮助。
您可以使用 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 文件,它检查当前的控制器和动作,并向按下的元素添加一个 class。
脚本文件
$(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
class 为元素添加样式,使其看起来与其他元素不同
CSS 文件
ul#menuBar li a.pressed {
background-color: #ff920a;
border-color: #ff920a;
}
您可以将这些原则应用到您自己的解决方案中。这也可以在纯 php 中完成,但这是我实现的一个示例
您可以在您的控制器中向您的方法添加一个参数,指示单击了哪个 link 并设置它。 像这样:
public ControllerMethod($clickedLink = null) {
// controller logic
$this->set(compact('clickedLink'));
}
如果您使用 Cakephp Helper 在控制器中执行了 links:
echo $this->Html->link('LinkName', array(($clickedLink == $idOfThisLink) ? 'class' => 'link-clicked' : '', 'controller' => 'ControllerName', 'action' => 'ActionName', 'linkId');
// linkActionName后的Id为点击link时传递给控制器的参数
然后将 class link-clicked 添加到您的 css 并使用您喜欢的样式。