Me gustaría diseñar el elemento del menú activo, para hacer esto necesito comparar la URL actual en una ruta. Sé que puedo hacer esto en JavaScript, pero me preguntaba cómo otras personas lo han solucionado en el juego.Playframework está activo elemento de menú/ruta
¿Alguna sugerencia?
Pseudocódigo:
<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>
Por desgracia, no pude encontrar una manera fácil de hacer esto. La solución más simple que pude encontrar fue escribir una etiqueta rápida (pero esto puede deberse a mi falta de experiencia en Groovy).
Esto funciona con este código.
En su opinión
<a class="#{activeRoute href:@Application.index(), activeClass:'active' /}" href="@{Application.index()}">My Page</a>
A continuación, cree un nuevo FastTag para activeRoute
public class MyFastTag extends FastTags {
public static void _activeRoute(Map<?, ?> args, Closure body, PrintWriter out, GroovyTemplate.ExecutableTemplate template, int fromLine) {
Router.ActionDefinition actionDef = (Router.ActionDefinition) args.get("href");
String activeStyle = (String) args.get("activeClass");
String inactiveStyle = (String) args.get("inactiveClass");
if (Http.Request.current().action.equals(actionDef.action) && activeStyle != null) {
out.print(activeStyle);
}
else if (!Http.Request.current().action.equals(actionDef.action) && inactiveStyle != null) {
out.print(inactiveStyle);
}
}
}
Asegúrese de agregar las importaciones pertinentes.
Esto le permite especificar una clase de activo e inactivo, que es un poco más de lo que solicitó
Esta solución funcionó bastante bien para mí. Tiene el beneficio de ser muy simple.
app/views/tags/navigationitem.js
%{
boolean isMatch = request.path.startsWith(_href.toString());
}%
<li class="sliding-element">
#{if isMatch}
<h3>${_title}</h3>
#{/if}
#{else}
<a href="${_href}">${_title}</a>
#{/else}
</li>
app/views/tags/navigationmenu.js
#{js 'navigationmenu.js'/}
#{css 'navigationmenu.css'/}
<div id="navigation-block">
<ul id="sliding-navigation">
#{navigationitem title:'Home', href:@HomeController.index() /}
#{navigationitem title:'Search Contact', href:@SearchByContactController.index() /}
#{navigationitem title:'Edit Contact', href:@EditContactInfoController.index() /}
</ul>
</div>
<a #{if request.action=="Application.index"}class="active"#{/if} href="@{Application.index()}">My Page</a>
fácil. : D trabajo
, también se puede verificar en la base del controlador (útil para la navegación global) de esta manera: # {if request.controller == "ControllerClassName"} class = "active" # {/ if} – Bijan
Este código para mí los chicos
<li @if(request.path.startsWith("/artigo")){ class="active" }>
<a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>
¿Por qué se utiliza 'if' otra cosa en lugar de una sencilla' else'? – niels
porque, si inactiveStyle es nulo, imprimirá nulo como estilo, y no quiero que se imprima nada si activeStyle o inactiveStyle son nulos ....... La primera parte de if es la misma, pero la segunda la evaluación es diferente para las dos sentencias if – Codemwnci