Wyświetlanie aktywnej nawigacji na podstawie danych kontekstowych

Question

Mam następujący oddzielny fragment w szablonie 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> 

Chcę dodać „aktywny” klasy do aktywnego elementu nawigacyjnego - ale wydaje się trudne zadanie do wykonania w Thymyleaf, jakieś sugestie?

Answer 1

Można dodać ModelAttribute z wartością aktywną w kontrolerach na każdej stronie, na przykład :

SettingsController.java

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

lub w SettingsControllerAdvice.java

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

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

} 

Następnie, we fragmencie nawigacji wliczone w settings.html:

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

Na koniec można powtórzyć ten proces dla każdego kontrolera i łączy na pasku nawigacyjnym.

Answer 2

Można to zrobić:

<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

Chociaż myślę, że jest brzydki rozwiązanie i jest to szkoda, że ​​thymeleaf nie posiada pewne makra dla niego, można użyć:

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

Będzie działa również w przypadku "głębszych" linków, takich jak /hotels/new, więc można go używać również w przypadku wielopoziomowych menu.

Answer 4

a to jest stare pytanie, chcę podzielić się tym rozwiązaniem, ponieważ może być znacznie bardziej eleganckie!

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

• Dodawanie parametru (activeTab) do fragmentu nawigacyjnego.

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

• przekazać wartość tego w głównych stron, które używają fragmentu NavBar

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

• wyboru go w 'li' elementu, aby ustawić "aktywna" klasa

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