Efeito ocultar e mostrar presente no Grails Brasil
03/01/2012 13:52
0
Oi galera, gostaria da ajuda de vocês sobre como conseguir um efeito de ocultar/mostrar similar ao presente na área "Sobre você" aqui mesmo no Grails Brasil. Ou seja, quando você clica em "Últimos posts", ele mostra as informações, e posteriormente oculta caso clicado novamente.
Sei que existe o grails-ui, mas tive alguns problemas de compatibilidade com o grails 2.0, então gostaria de tentar fazer sem a utilização de plugins. Enfim, alguém tem algo que possa me ajudar em relação a isso?

Outra dúvida que tenho é: quanto menor o número de plugins que utilizo maior é a manutenibilidade da minha aplicação em Grails? Ja que alguns plugins são descontinuados ou não acompanham o atualizar do framework...
Tags: javascript ocultar mostrar


0
Recomendo vc utilizar o jQuery, pois não irá ter incompatibilidades com versões novas do grails.
Crie uma 'div' oculta com as informações e depois use o 'show' e 'hide' do jQuery:
http://api.jquery.com/show/
e
http://api.jquery.com/hide/
03/01/2012 14:03


0
Oi Andrei,

é tudo feito com jQuery mesmo. Da uma olhada no código fonte:


function exporAcordeon(id_elemento) {
var elemento = $("#" + id_elemento)
if (elemento != null) {
elemento.slideToggle()
}
}


0
Fiquei um pouco confuso Henrique, nesse caso, o "id_elemento" é o id da div ou do elemento o qual acionará a ação? Se for o id da div, onde eu aciono essa ação(pode ser um botão ou qualquer outro elemento através do "onclick")?

O grails 2.0 ja vem com jquery por padrão então basta eu adicionar isto
<r:require module="jquery"/>

ao head?

A função vai no head também??

Por exemplo tenho uma div simples como a abaixo

<div id="div" class="dadosExtra">
Oi, essa div possui dados extras
</div>


No CSS adicionei display:none para ela se tornar oculta, então como fica a função para obter esse feito nessa div?

Desde ja, agradeço. Sei que são mtas perguntas, mas se eu não perguntar aqui, não tenho muito a quem recorrer. Até mais.
03/01/2012 15:29


1
Oi Andrei,

exatamente: o id diz respeito ao id da div que você quer ocultar ou não. A chamada da função é inserida no link que você quer que, ao clicado, oculte ou exponha a div alvo.

No caso do Grails 2.0, você tem de fazer exatamente como disse, incluindo a tag require no head do seu arquivo gsp.

A função não precisa ir na head. Inclusive, é uma boa prática você incluir todas as suas funções javascript no final do arquivo gsp. Isto costuma melhorar a responsibilidade da página. A inclusão no head da tag require é apenas uma questão de organização mesmo, e pra garantir que as dependências já haviam sido pré-carregadas.

A função slideToggle do jQuery faz basicamente o seguinte: se houver o atributo display: none no alvo, ele muda pra display: block e a anima. Caso contrário, ele a define como display: none e também anima, criando este efeito presente no Grails Brasil.


1
Obrigado Kico e Castiel novamente pela super ajuda... O que seria do meu aprendizado sobre Grails sem vocês.

Ps.: Não sabia que era tão fácil assim... o.O

Até a próxima.
03/01/2012 17:22


0
Bom aprender sobre a 'slideToggle', sempre usei 'show' e 'hide' sem efeitos.
03/01/2012 18:50



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