spring - Apache Tiles 2.5 - 将菜单元素标记为事件状态

Question

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

我有这个图 block :

<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

更改菜单图 block 以使用某些菜单对象的列表构建菜单，您可以在 session /模型上设置这些菜单对象。菜单对象可以有一个 bool 标志，指示将事件类设置为哪一个。

方法 2 - JavaScript/ session

如果您不想这样做，您可以结合使用 HTML 类、JavaScript 和 session /模型属性来完成该任务。您要做的就是重载 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 并向其中添加“事件”类。

方法 3 - 使用 URL 的纯 JSTL

如果您不喜欢将菜单与属性的存在联系起来，并且您知道您的 URL 在解析时将包含一些可用于确定将哪个 LI 设置为事件的信息，您可以使用它。您可以获取当前页面的 URL，例如

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

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

方法 4 - 使用 URL 的纯 JavaScript

与上面相同，但是使用 JavaScript 来获取当前 URL、解析它并操作 DOM，就像我们在方法 2 中所做的那样。

希望其中之一对您有所帮助。