Apache Tiles 2,5 - Segna elemento di menu come attiva

Question

sto usando Spring MVC 3.1 e piastrelle 2.

ho questo Tile:

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

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

Ora, voglio impostare la classe "attiva" per il menu selezionato. Posso farlo con le piastrelle? O devo cercare con Spring?

Answer 1

Approccio 1 - JSP/JSTL e Spring/fagioli

Modifica la tua tessera di menu per la costruzione del menu utilizzando un elenco di alcuni menù-oggetto, che può essere impostato sulla sessione/modello. L'oggetto menu potrebbe avere un indicatore booleano che indica su quale impostare la classe attiva.

Approccio 2 - JavaScript/Session

Se non si vuole fare in questo modo, è possibile utilizzare una combinazione di lezioni di HTML, JavaScript, e una sessione/modello di attributeto realizzare il compito. Che cosa si dovrebbe fare è sovraccaricare l'attributo class sui vostri elementi LI, qualcosa di simile:

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

Si potrebbe quindi avere un po 'di JS, usando JSTL per ottenere la classe, per selezionare l'elemento LI corretta e impostare la classe. Con jQuery potrebbe apparire come:

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

Ciò utilizzare jQuery per selezionare la corretta LI e aggiungere la classe 'attivo' ad esso.

Approccio 3 - JSTL Pure utilizzando URL

Se non ti piace legare il vostro menu per la presenza di un attributo, e si conosce l'URL verrà, quando analizzato, avrà alcune informazioni si può usare per determinare quale LI impostare come attivo, puoi usare quello. È possibile ottenere l'URL della pagina corrente come

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

Parse $ {} pageContext.request.requestURL in qualche modo significativo, e si potrebbe utilizzare per determinare quale è attiva.

Approach 4 - Pure JavaScript utilizzando URL

Idem come sopra, ma usando JavaScript per ottenere l'URL corrente, analizzarlo, e manipolare il DOM come abbiamo fatto nel metodo 2.

Speriamo che un di questi ti aiutano