Ich möchte den aktiven Menüpunkt formatieren, dazu muss ich die aktuelle URL gegen eine Route vergleichen. Ich weiß, dass ich das in Javascript machen kann, aber ich habe mich gefragt, wie andere Leute das im Spiel gelöst haben.Playframework ist aktiv Menüeintrag/Route
Irgendwelche Vorschläge?
Pseudocode:
<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>
Leider kann ich nicht einen einfachen Weg finden, dies zu tun. Die einfachste Lösung, die ich finden konnte, war ein schnelles Tag zu schreiben (aber das könnte an meinem Mangel an Groovy-Erfahrung liegen).
Ich habe das mit diesem Code arbeiten.
Ihrer Ansicht
<a class="#{activeRoute href:@Application.index(), activeClass:'active' /}" href="@{Application.index()}">My Page</a>
Dann erstellen Sie eine neue FastTag für 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);
}
}
}
Achten Sie darauf, die entsprechenden Importe hinzufügen.
Auf diese Weise können Sie eine aktive und inaktive Klasse angeben, die ein wenig mehr, als Sie
angefordertDiese Lösung für mich ziemlich gut funktioniert. Es hat den Vorteil, sehr einfach zu sein.
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>
Einfach. : D
Sie können auch die Controller-Basis (nützlich für die globale Navigation) wie folgt überprüfen: # {if request.controller == "ControllerClassName"} class = "active" # {/ if} – Bijan
Dieser Code Arbeit für mich Jungs
<li @if(request.path.startsWith("/artigo")){ class="active" }>
<a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>
Warum Sie 'sonst if' anstelle eines einfachen verwenden' else'? – niels
weil, wenn inactiveStyle null ist, würde es null als Stil drucken, und ich will nichts gedruckt, wenn activeStyle oder inactiveStyle null sind ....... Der erste Teil des if ist derselbe, aber der zweite Die Auswertung unterscheidet sich für die beiden if-Anweisungen – Codemwnci