Apacheのタイル2.5 - マークメニュー素子活性

Question

ように私は、私は、このタイルを持って春のMVC 3.1とタイル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> 

ここでは、選択したメニューのクラスを「アクティブ」に設定します。 タイルでこれを行うことはできますか？それとも、私は春を見上げなくてはなりませんか？

Answer 1

アプローチ1 - JSP/JSTLと春/ビーン

変更するには、セッション/モデルに設定することができ、いくつかのメニューオブジェクトのリストを使用してメニューを構築するためにあなたのメニューのタイルを。 menu-objectには、どちらがアクティブなクラスを設定するかを示すbooleanフラグがあります。

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

あなたはこのようにそれを行うにはしたくない場合は、タスクを達成attributeto HTMLクラスは、JavaScript、およびセッション/モデルの組み合わせを使用することができます。適切なLI要素を選択し、クラスを設定するには、クラスを取得するためにJSTLを使用して、あなたはその後、少しJSを持っているでしょう

<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> 

：何だろうことは、あなたのLI要素上のようなものをクラス属性をオーバーロードです。 jQueryを使用すると、次のようになります。

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

jQueryを使用して適切なLIを選択し、「アクティブ」クラスを追加します。

アプローチ3 - あなたは属性の存在のために、あなたのメニューを結ぶ好きではない、とあなたはあなたのURLは、解析されたときに、あなたが使用できるいくつかの情報を持っているだろうことを知っている場合はURL

を使用してピュアJSTLどのLIをアクティブとして設定するかを決定するには、それを使用することができます。あなたは、いくつかの意味のある方法で

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

解析$ {pageContext.request.requestURL}のように、現在のページのURLを取得することができ、あなたがアクティブであるかを決定するためにそれを使用することができます。

アプローチ4 - ピュアJavaScriptを使用して上記のように

同じURL、しかし、現在のURLを取得し、それを解析して、我々は2

うまくいけば1をアプローチで行ったようにDOMを操作するためにJavaScriptを使用してこれらのうち、あなたを助けます。