Como deixar um item como selecionado no menu
19/11/2012 20:54
1
Olá pessoal,

Quero saber como faço para ao clicar em um item do meu menu, esse item fique com uma característica de que ele está selecionado (mude a cor, o estilo da fonte, qualquer coisa..).


Mais detalhes:

No index.gsp existe uma div que é o meu menu lateral:

<div>
<ul>
<g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
<g:if test="${c.getStaticPropertyValue('isInMainMenu', Boolean)}">
<li class="controller">
<g:link controller="${c.logicalPropertyName}">
${c.getStaticPropertyValue('controllerName', String)}
</g:link>
</li>
</g:if>
</g:each>
</ul>
</div>

acima está colocando no menu os itens que são as domains classes Modulo, Perfil, Regra e Usuario. Ao clicar em uma das opções, é direcionado para a list da domain selecionada. Mas os itens continuam do mesmo jeito, não da para o usuário saber só olhando para o menu qual opção está selecionada no momento.

Grato desde já.
Tags: menu, item, selecionado


1
Oi Victor, interessante esta sua solução.

Uma sugestão seria você verificar qual o nome do controlador na sua página através do atributo controllerName (se não me engano, ele está disponível no contexto do gsp por padrão) e compará-lo com o controlador que está sendo iterado no seu g:each. Se for, então você adiciona uma classe que identifique o menu como ativo no seu gsp no momento em que for renderizar o elemento li ou a relacionado.


1
Fala Brother!

Uma sugestão tb seria usando resquisição ajax para carregar as páginas com as listas! no sucess da requisição vc pode alterar as propriedades do item do menu que o usuário clicar! É só uma idéia! :D

Abraço!


0
Olá,

agradeço a resposta de vocês mas estou usando o grails a pouco tempo e Gabriel não tenho muito conhecimento no ajax, será que vcs poderiam me dar um exemplo prático para as suas soluções?
20/11/2012 13:15


2
Galera,

Obitive outra ajuda e chegamos a uma solução "atraente".

acrescentamos um g:if na li onde compara qual a controller que está sendo utilizada no momento com a linha de código:


<g:if test="${ c.logicalPropertyName == request.servletPath.split('/')[2]}">


então, para a classe que está sendo utilizada no momento criou-se no main.css (que é o css que está sendo utilizada pela div em id=menu) um controller-visited para mudar o estilo do item que está selecionado.

Segue abaixo os dois códigos:

index.gsp

<div id=menu>
<ul>
<g:each var="c" in="${grailsApplication.controllerClasses.sort { it.fullName } }">
<g:if test="${c.getStaticPropertyValue('isInMainMenu', Boolean)}">
<li
<g:if test="${ c.logicalPropertyName == request.servletPath.split('/')[2]}">
class="controller-visited"
</g:if>
<g:else>
class="controller"
</g:else>
>
<g:link controller="${c.logicalPropertyName}">
${c.getStaticPropertyValue('controllerName', String)}
</g:link>
</li>
</g:if>
</g:each>
</ul>
</div>


main.css

#menu li.controller-visited a{
color: #fff;
background: url(../images/ntc/menu.gif) 0 -64px;
padding: 8px 0 0 25px;
}
20/11/2012 14:56



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto