JQuery

Habilitando e desabilitando elementos com JQuery

Posted on setembro 7, 2012. Filed under: JavaScript, JQuery, Tips | Tags:, , , |

Introdução

Habilitar e desabilitar elementos em sua página, torna-se uma tarefa simples quando se trata de JQuery. Neste artigo iremos manipular o atributo disabled, usado para controlar se o elemento esta habilitado ou desabilitado, usando o método prop() ao invés de attr(), que é mais específico para esta finalidade.

Veja abaixo alguns exemplos:

Desabilitando elementos:

// desabilitando determinado elemento
$('#id_elemento').prop('disabled', true);

// desabilitando todos elementos dentro de tag <div>
$('div *').prop('disabled', true);

// desabilitando somete elementos do tipo input e button dentro de tag <div>
$('div').find('input, button').prop('disabled', true);

// desabilitando todos tipos de input (input, textarea, select, button) dentro de tag <div>
$('div').find(':input').prop('disabled', true);

Habilitando elementos:

Use o mesmo método prop() conforme anteriormente, mas setando o valor para false.

$('#id_elemento').prop('disabled', false);
...

Considerações

O método prop() foi adicionado à partir da versão 1.6 do jquery. Use prop() ao invés de attr() para atributos como disabled, checked, selected, etc. São atributos considerados “booleanos” na especificação W3C. Ele foi criado para esse propósito. Para maiores detalhes, acesse a documentação do JQUery: http://api.jquery.com/prop/

O método attr() pode fazer o trabalho de desabilitar e habilitar elementos também. Porém com a criação do prop(), o attr() deixou de ser a melhor forma de resolver essa questão. Utilize-o caso esteja com uma versão do jquery mais antiga, inferior à 1.6. Veja abaixo exemplos:

// desabilitando elementos
$('#id_do_elemento').attr('disabled', 'disabled');

// habilitando elementos
$('#id_do_elemento').removeAttr('disabled');
Ler Post Completo | Make a Comment ( 1 so far )

Rolar o scroll do navegador para o topo usando JQuery

Posted on outubro 6, 2010. Filed under: JavaScript, JQuery |

Se em algum momento na programação do seu site você queira que scroll suba para o topo de forma automatizada, você pode resolver isso facilmente utilizando o JQuery. É só inserir o código abaixo no lugar onde você deseja acionar a função:

$('html, body').scrollTop(0);

Caso queira fazer uma firula, utilize a instrunção abaixo. O scroll irá para o topo de forma animada (lentamente):

$('html, body').animate({scrollTop:0}, 'slow');

Ler Post Completo | Make a Comment ( 4 so far )

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: