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á.
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á.
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.
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.
19/11/2012 22:44
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!
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!
19/11/2012 23:52
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?
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:
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
main.css
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
Os melhores blogs de TI (e em português) em um único lugar!
