Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais


Dica No :
1053
Assunto : ASP.NET
Titulo: Destacando linhas da Grid com JQuery

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :

Translate this page now :






Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon



Destacar linhas de uma gridview de acordo com a passagem do mouse sobre a linha gera um efeito muito interessante em uma aplicação web e não é difícil de fazer em JQuery.

Veja como fica simples :

<script language="javascript" type="text/javascript">
var cor;
$(document).ready(function () {
$("tr:not(tr:first,tr:has(table))").hover(function () {
cor = $(this).css("backgroundColor");
$(this).css("backgroundColor", "");
$(this).addClass("popupHover");
},
function () {
$(this).css("backgroundColor", cor);
$(this).removeClass("popupHover");
})
})
</script>


Neste código fiz uso de uma classe chamada popupHover, você pode personalizar esta classe a vontade. Em meu exemplo, a classe tem esta definição :

.popupHover {
background-image:url(/images/header-opened.png);
background-repeat:repeat-x;
background-position:left top;
background-color:#F5F7F8;
cursor:pointer;
}

Veja como fica o resultado em http://www.bufaloinfo.com.br/samples/jquerysample1.aspx

Vamos analisar os vários trechos de código para identificar detalhes de como funciona :

$(document).ready(function ()

Neste trecho estamos atribuindo uma função ao evento “ready” do objeto document, garantindo assim que nosso código apenas será executado quando a página houver sido carregada por inteiro.

"tr:not(tr:first,tr:has(table))"

Este seletor trás como resultado todas as TRs da página, exceto a 1a (que é a linha de título da gridview) e TRs que contenham tables (o paginador da gridview é assim). Desta forma este seletor nos trás as linhas de dados da gridview.

Caso existam várias tabelas na página, podemos filtrar um pouco mais o seletor para garantir que ele nos traga os TRs de uma tabela específica. Por exemplo : ".minhaclasse tr:not(tr:first,tr:has(table))" – desta forma podemos cercar a gridview com um span/div com class=”minhaclasse” e o nosso código apenas pegará os TRs dentro deste espaço.


.hover(function ()

O método hover facilita o nosso trabalho permitindo atribuir uma função para a ação de mouseover e outra função para a ação de mouseout. Observe que passamos duas funções como parâmetro do método hover


cor = $(this).css("backgroundColor");

Guarda a cor da linha atual. Frequentemente as gridviews tem uma aplicação de cor de fundo nas linhas, após o efeito de destaque quando o mouse passar a linha deverá voltar a sua cor original


$(this).css("backgroundColor", "");

Apaga a definição de cor de fundo que eventualmente a linha possua.


$(this).addClass("popupHover");

Adiciona as definições de uma nova classe CSS ao estilo já existente na linha.


$(this).css("backgroundColor", cor);

Retorna a cor original da linha


$(this).removeClass("popupHover");

Remove a classe css indicada do estilo da linha


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 1/31/2017 11:03:00 PM
nome: zJHjNjEqmXEfQSPeRb
email: derby451@hotmail.com
comentário:
QRUJZy http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/31/2017 11:01:00 AM
nome: rzoFUnXhbOHYbJrr
email: derby451@hotmail.com
comentário:
rJ0jC7 http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 10:02:00 PM
nome: TVhFfCDCuNEycFG
email: derby451@hotmail.com
comentário:
2Hy4cR http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 9:01:00 PM
nome: xLdhnWqNnnbUciuMG
email: jogcbfn@hotmail.com
comentário:
BNWkVw http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

data: 1/29/2017 8:17:00 AM
nome: bxKcZxpkFdqKGXGCGI
email: jogcbfn@hotmail.com
comentário:
lWi4nL http://www.y7YwKx7Pm6OnyJvolbcwrWdoEnRF29pb.com

 1  
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br