Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais
JQuery #1 : Destacando linhas de uma GridView
Data:6/29/2010

Translate this page now :





Categories: ASP.NET , JQuery

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :
Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon

Veja Também


 

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");
            })
        })
    

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



Categories: ASP.NET , JQuery


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 10/13/2016 4:26:00 PM
nome: eChPjKJyqy
email: jimos4581rzt@hotmail.com
comentário:
9rP0Gm http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

data: 8/11/2015 5:38:00 AM
nome: fKNybPQQkAVFNZX
email: djbrucho3@gmail.com
comentário:
1sBC94 http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.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