我想要给当前菜单项添加样式,为此我需要将当前URL与路由进行比较。我知道可以使用JavaScript来实现这一点,但是我想知道其他人是如何在Play中解决这个问题的。
有什么建议吗?
伪代码:
<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>
我想要给当前菜单项添加样式,为此我需要将当前URL与路由进行比较。我知道可以使用JavaScript来实现这一点,但是我想知道其他人是如何在Play中解决这个问题的。
有什么建议吗?
伪代码:
<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>
<a #{if request.action=="Application.index"}class="active"#{/if} href="@{Application.index()}">My Page</a>
很容易。 :D
%{
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>
很遗憾,我没有找到一种简单的方法来做到这一点。我能找到的最简单的解决方案是编写一个快速标签(但这可能是由于我缺乏Groovy经验造成的)。
我用以下代码使其工作。
在你的视图中:
<a class="#{activeRoute href:@Application.index(), activeClass:'active' /}" href="@{Application.index()}">My Page</a>
然后,为activeRoute创建一个新的FastTag
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);
}
}
}
请确保添加相关的导入。
这样可以让您指定活动和非活动类,比您请求的更多一些。
else if
而不是简单的else
? - niels这段代码对我来说可行
<li @if(request.path.startsWith("/artigo")){ class="active" }>
<a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>