Apache Tiles 2,5 - Mark elementem menu jako aktywnego

Question

Używam MVC wiosny 3.1 i płytki 2.

mam ten Płytka:

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

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

Teraz chcę ustawić klasę "aktywną" dla wybranego menu. Czy mogę to zrobić za pomocą płytek? Czy muszę sprawdzić wiosnę?

Answer 1

Approach 1 - JSP/JSTL i wiosna/Fasola

zmienić płytki Menu budowania menu używając lista niektórych menu obiektu, który można ustawić na sesji/modelu. Obiekt menu może mieć flagę binarną wskazującą, który z nich ma ustawić aktywną klasę.

Podejście 2 - JavaScript/Session

Jeśli nie chcesz robić to w ten sposób, można użyć kombinacji klas HTML, JavaScript oraz sesji/model attributeto wykonać zadanie. Co byś zrobił, jest przeciążenie atrybutu class na swoich elementów Li, coś takiego:

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

Będziesz wtedy mieć trochę JS, używając JSTL uzyskać klasę, aby wybrać odpowiedni element, LI i ustawić klasę. Z jQuery może wyglądać następująco:

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

To będzie używać jQuery, aby wybrać właściwą LI i dodać klasę „aktywne” do niego.

Podejście 3 - Czysta JSTL przy użyciu adresu URL

Jeśli nie podoba wiążąc swoje menu na obecność atrybutu, a wiesz, że twój adres URL, gdy analizowany, będzie miał pewne informacje można użyć aby określić, który LI ustawić jako aktywny, możesz go użyć. Można uzyskać adres URL bieżącej strony niczym

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

Parse} $ {pageContext.request.requestURL w jakiś sensowny sposób, i można go używać do określenia, które jest aktywne.

Podejście 4 - Czysty JavaScript używając URL

samo jak powyżej, ale przy użyciu JavaScript, aby uzyskać aktualny adres URL, analizować je i manipulować DOM jak my w podejściu 2.

Mam nadzieję, że jeden z tych pomóc.