Подсчет текущей страницы как активной ссылки в включенном меню навигации

У меня есть статическое меню на боковой панели, которое я включаю на каждой странице JSF. Меню выглядит так:Подсчет текущей страницы как активной ссылки в включенном меню навигации

<li class="nav-header">Item 1</li> 
    <li class="active"><a href="index.xhtml">Item 2</a></li> 
    <li><a href="new_workload.xhtml">Item 3</a></li> 
    <li><a href="import_workload.xhtml">Item 4</a></li>

Добавление class="active" к <li> выдвигает на первый план меню. Как я могу убедиться, что выбранный элемент выделен динамически в JSF2?

Я знаю, что PrimeFaces и RichFaces имеют готовые компоненты для этого, но сначала я хочу попробовать чистое решение JSF 2. Также приемлемо решение JavaScript на стороне клиента.

источник

2012-06-19 Ravi S

Вы можете получить текущий вид ID в EL следующим

#{view.viewId}

Таким образом, это должно сделать

class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"

Было бы легче держать все эти ссылки в какой-то List<Page> так что вы может просто сделать что-то вроде

<li class="nav-header">#{menu.header}</li> 
<ui:repeat value="#{menu.pages}" var="page"> 
    <li class="#{view.viewId eq page.viewId ? 'active' : ''}"> 
     <h:link value="#{page.title}" outcome="#{page.viewId}" /> 
    </li> 
</ui:repeat>

вместо copypasting один и тот же код над и более.

источник

2012-06-19 04:44:54 BalusC

Thank you BaluSC.! Что бы новички в JSF обошелись без вас :-) Цените свое терпение, отвечая на все эти вопросы noob ... –

Добро пожаловать. – BalusC

вы можете предложить некоторое решение, когда пункт меню обновляет частичную страницу через ajax. а не полная страница обновляется. Я могу сделать это с помощью обратного вызова javascript при щелчке по меню. но что может быть лучшим подходом. –

Я использовал @BalusC идею плюс другие его кончик в 12473461, но с некоторыми изменениями :

<ul> 
    <li class="#{view.viewId eq '/admin/index.xhtml' ? 'active' : ''}"><h:link value="Main" outcome="main"/></li> 
    <li class="#{fn:startsWith(view.viewId, '/admin/sess1/') ? 'active' : ''}"><h:link value="Session 1" outcome="sess1"/></li> 
    <li class="#{fn:startsWith(view.viewId, '/admin/sess2/') ? 'active' : ''}"><h:link value="Session 2" outcome="sess2"/></li> 
    <li class="#{fn:startsWith(view.viewId, '/admin/sess3/') ? 'active' : ''}"><h:link value="Session 3" outcome="sess3"/></li> 
</ul>

источник

2013-07-23 21:44:54

Мое решение основано на пользовательский компонент:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:c="http://java.sun.com/jsp/jstl/core" > 
<composite:interface> 
    <composite:attribute name="outcome" /> 
    <composite:attribute name="label" /> 
</composite:interface> 

<composite:implementation> 
    <li class="menuItem #{view.viewId == cc.attrs.outcome ? 'active' : ''}"> 
     <h:outputText value="#{cc.attrs.label}" rendered="#{view.viewId eq cc.attrs.outcome}"/> 
     <h:link outcome="#{cc.attrs.outcome}" value="#{cc.attrs.label}" rendered="#{view.viewId ne cc.attrs.outcome}" /> 
    </li> 
</composite:implementation> 
</html>

Используется в коде:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:my="http://java.sun.com/jsf/composite/my"> 
... 
<ul class="nav"> 
    <my:menuItem outcome="/home.xhtml" label="Home" /> 
</ul>

источник

2014-05-26 09:05:29 Globator

Здесь будет достаточно простого тега макета. – stg

Подсчет текущей страницы как активной ссылки в включенном меню навигации

ответ

Смежные вопросы