Apache Tiles 2.5 - Mark Menüelement als aktive

Question

Ich verwende Spring MVC 3.1 und Fliesen 2.

Ich habe diese Fliese:

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

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

Jetzt möchte ich die Klasse "aktiv" für das ausgewählte Menü festlegen. Kann ich das mit Tiles machen? Oder muss ich mit Spring aufsehen?

Answer 1

Ansatz 1 - JSP/JSTL und Frühjahr/Bean

Ändern Sie Ihr Menü Kachel das Menü eine Liste von einigen Menü-Objekt zu erstellen, die Sie auf der Sitzung/Modell festlegen. Das Menü-Objekt könnte ein boolesches Flag haben, das angibt, auf welcher die aktive Klasse gesetzt werden soll.

Ansatz 2 - JavaScript/Session

Wenn Sie es auf diese Weise nicht tun wollen, können Sie eine Kombination aus HTML-Klassen, JavaScript und eine Sitzung/Modell verwenden attributeto die Aufgabe zu erfüllen. Was würden Sie tun, ist die Klasse Attribut auf Ihrer LI-Elemente überlasten, so etwas wie:

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

würden Sie dann ein wenig JS haben, JSTL mit der Klasse zu erhalten, um die richtige LI Element auszuwählen und die Klasse. Mit jQuery könnte es wie folgt aussehen:

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

Diese jQuery verwenden, um die richtige LI und fügen Sie den ‚aktiven‘ Klasse, um es auszuwählen.

Ansatz 3 - Pure JSTL URL

Wenn Sie Ihr Menü nicht auf das Vorhandensein eines Attributs wie binden, und Sie wissen, dass Ihr URL wird, wenn analysiert, einige Informationen, die Sie verwenden können Um zu bestimmen, welche LI als aktiv gesetzt werden soll, könnten Sie diese verwenden. Sie können die aktuelle Seite URL erhalten wie

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

Parse $ {} pageContext.request.requestURL auf sinnvolle Art und Weise, und man konnte es verwenden, um festzustellen, welche aktiv ist.

Ansatz 4 - Pure mit Hilfe von JavaScript-URL

Wie oben, aber mit Hilfe von JavaScript die aktuellen URL erhalten, analysieren sie und das DOM zu manipulieren, wie wir 2 in Ansatz haben

Hoffentlich eine davon helfen dir.