6

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 で検索する必要がありますか?

4

1 に答える 1

8

アプローチ 1 - JSP/JSTL と Spring/Bean

メニュー タイルを変更して、セッション/モデルで設定できるメニュー オブジェクトのリストを使用してメニューを作成します。menu-object は、アクティブなクラスを設定するものを示すブール値フラグを持つことができます。

アプローチ 2 - JavaScript/セッション

この方法を使用したくない場合は、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>

次に、JSTL を使用してクラスを取得し、適切な LI 要素を選択してクラスを設定する小さな JS を作成します。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

上記と同じですが、方法 2 で行ったように JavaScript を使用して現在の URL を取得し、それを解析して DOM を操作します。

うまくいけば、これらのいずれかがあなたを助けます。

于 2013-03-13T13:59:49.157 に答える