Apache Tiles 2.5 - 将菜单元素标记为活动

Question

我正在使用Spring MVC 3.1和Tiles 2.

我有这个瓷砖:

<ul class="nav">
  <li class="active"><a href="/person">Person</a></li>
  <li><a href="/student">Student</a></li>
  <li><a href="/superadmin">Superadmin</a></li>
</ul>

而且tiles.xml:

<tiles-definitions>
    <definition name="base.definition" template="/WEB-INF/pages/tiles/template.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="navbar" value="/WEB-INF/pages/tiles/navbar.jsp" />
        <put-attribute name="sidebar" value="/WEB-INF/pages/tiles/sidebar.jsp" />
        <put-attribute name="body" value="" />
        <put-attribute name="footer" value="/WEB-INF/pages/tiles/footer.jsp" />
    </definition>


    <definition name="user.new" extends="base.definition">
      <put-attribute name="body" value="/WEB-INF/pages/user.new.jsp" />
    </definition>

    <definition name="user.show" extends="base.definition">
      <put-attribute name="page_title" value="Tiles tutorial homepage" type="string"/>
      <put-attribute name="section_title" value="User's list" type="string"/>
      <put-attribute name="body" value="/WEB-INF/pages/user.show.jsp" />
    </definition>


    <definition name="login" template="/WEB-INF/pages/login.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="body" value="/WEB-INF/pages/login.jsp" />
    </definition>

</tiles-definitions>

现在,我想为所选菜单设置"活动"类.我可以用瓷砖做到吗？或者我必须查看Spring？

Answer 1

方法1 - JSP/JSTL和Spring/Bean

更改菜单区块以使用某个菜单对象列表构建菜单,您可以在会话/模型上设置该菜单对象.菜单对象可以有一个布尔标志,指示在哪一个上设置活动类.

方法2 - JavaScript/Session

如果您不想这样做,可以使用HTML类,JavaScript和会话/模型属性的组合来完成任务.你要做的是重载LI元素的class属性,如:

<ul class="nav">
  <li class="person"><a href="/person">Person</a></li>
  <li class="student"><a href="/student">Student</a></li>
  <li class="superadmin"><a href="/superadmin">Superadmin</a></li>
</ul>

然后你会有一个小JS,使用JSTL来获取类,选择正确的LI元素并设置类.使用jQuery可能看起来像:

$(document).ready(function() {
  $('.${mySelectedClass}').addClass('active');
});

这将使用jQuery选择合适的LI并为其添加"active"类.

方法3 - 使用URL的纯JSTL

如果您不喜欢将菜单与某个属性相关联,并且您知道您的URL在解析时会有一些信息可用于确定哪个LI设置为活动,您可以使用它.您可以获取当前页面的URL

<c:out value="${pageContext.request.requestURL}"/>

以某种有意义的方式解析$ {pageContext.request.requestURL},您可以使用它来确定哪个是活动的.

方法4 - 使用URL的纯JavaScript

与上面相同,但使用JavaScript获取当前URL,解析它,并像处理方法2中那样操纵DOM.

希望其中一个可以帮到你.