Je voudrais styliser l'élément de menu actif, pour ce faire, j'ai besoin de comparer l'URL actuelle à un itinéraire. Je sais que je peux le faire en javascript, mais je me demandais comment d'autres personnes ont résolu cela en jeu.Playframework est un élément de menu actif/route
Des suggestions?
pseudocode:
<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>
Malheureusement, je ne pouvais pas trouver un moyen facile de le faire. La solution la plus simple que j'ai pu trouver était d'écrire une étiquette rapide (mais ceci peut être dû à mon manque d'expérience de Groovy).
J'ai eu ce travail avec ce code.
Dans votre vue
<a class="#{activeRoute href:@Application.index(), activeClass:'active' /}" href="@{Application.index()}">My Page</a>
Ensuite, créez une nouvelle FastTag pour 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);
}
}
}
Assurez-vous d'ajouter les importations concernées.
Cela vous permet de spécifier une classe active et inactive, ce qui est un peu plus que vous avez demandé
Cette solution a fonctionné assez bien pour moi. Il a l'avantage d'être très 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>
facile. : D
vous pouvez également vérifier sur la base du contrôleur (utile pour la navigation globale) comme ceci: # {if request.controller == "ControllerClassName"} class = "active" # {/ if} – Bijan
Ce travail de code pour moi les gars
<li @if(request.path.startsWith("/artigo")){ class="active" }>
<a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>
Pourquoi vous utilisez 'autre if' au lieu d'un simple,' else'? – niels
car, si inactiveStyle est null, il affichera null comme style, et je ne veux rien imprimer si activeStyle ou inactiveStyle sont null ....... La première partie de l'if est la même, mais la seconde l'évaluation est différente pour les deux instructions si – Codemwnci