Visualizzazione della navigazione attiva in base ai dati contestuali

Question

Ho un frammento separato seguente in un modello di Thymeleaf.

<ul class="nav nav-tabs"> 
     <li role="presentation"><a href="/">Freight Invoices</a></li> 
     <li role="presentation"><a href="/processed">Processed Invoices</a></li> 
     <li role="presentation"><a href="/postingrules">Posting Rules</a></li> 
     <li role="presentation" class="active"><a href="/settings">Settings</a></li> 
    </ul> 

Voglio aggiungere una classe "attivo" per elemento di navigazione attiva - ma sembra compito difficile da realizzare in Thymyleaf, qualche suggerimento?

Answer 1

Si potrebbe aggiungere un ModelAttribute con il valore attiva nel vostro controller per ogni pagina, ad esempio, :

SettingsController.java

@RequestMapping("/settings") 
public String viewSettings(Model model) { 
    // do stuff 
    model.addAttribute("classActiveSettings","active"); 
    return "settings"; 
} 

o in un SettingsControllerAdvice.java

@ControllerAdvice(assignableTypes = SettingsController.class) 
public class SettingsControllerAdvice { 

    @ModelAttribute("classActiveSettings") 
    public String cssActivePage() { 
     return "active"; 
    } 

} 

Poi, nel frammento di navigazione incluso nel vostro settings.html:

<ul class="nav nav-tabs"> 
    <!-- Other links --> 
    <li role="presentation" th:class="${classActiveSettings}"> 
     <a th:href="@{/settings}">Settings</a> 
    </li> 
</ul> 

Infine, è possibile ripetere questo processo per ciascun controller e collegamenti nella barra di navigazione.

Answer 2

È possibile farlo:

<ul class="nav navbar-nav"> 
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="@{/dashboard}"><span>Dashboard</span></a></li> 
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="@{/orders}"><span>Orders</span></a></li> 
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="@{/income}"><span>Income</span></a></li> 
    <li role="separator" ></li> 
</ul> 

Answer 3

Anche se penso che è brutto soluzione ed è peccato che thymeleaf non hai alcune macro per esso, è possibile utilizzare:

<li th:classappend="${#httpServletRequest.getRequestURI().startsWith('/hotels') ? 'active':''}"> 
    Hotel 
</li> 

Sarà funziona anche per collegamenti "più profondi" come /hotels/new quindi è utilizzabile anche per i menu multilivello.

Answer 4

mentre questa è una vecchia domanda, voglio condividere questa soluzione in quanto potrebbe essere molto più elegante!

http://nixmash.com/post/bootstrap-navbar-highlighting-in-thymeleaf

• Aggiungere un parametro (ActiveTab) al frammento di navigazione.

<div th:fragment="common-navbar(activeTab)"></div> 

• passare il valore di esso nelle pagine principali che utilizzano il frammento navbar

<div th:replace="common/navbar :: common-navbar(about)"></div> 

• assegno in elemento 'li' per impostare la classe "attiva"

<li th:class="${activeTab == 'about'}? 'active' : null"><a href="">About</a></li>