CTRL+ALT+DEL
10 10UTC novembro 10UTC 2010 Deixe um comentário
10 10UTC novembro 10UTC 2010 Deixe um comentário
20 20UTC setembro 20UTC 2010 Deixe um comentário
20 20UTC setembro 20UTC 2010 Deixe um comentário
19 19UTC setembro 19UTC 2010 Deixe um comentário
19 19UTC setembro 19UTC 2010 Deixe um comentário
19 19UTC setembro 19UTC 2010 Deixe um comentário
4 04UTC abril 04UTC 2010 2 Comentários
Ja fiz isso váaarias vezes, o famoso “marcar/desmarcar todos” com checkboxes, para (por exemplo) excluir ou editar vários resultados de uma vez.
Para facilitar minha vida e não ter que fazer isso toda vez, resolvi criar um plugin para o jQuery. O plugin é bem simples, o principal objetivo mesmo era “não gastar tempo” fazendo isso.
No exemplo abaixo, eu coloquei o name do meu checkbox principal (o que irá selecionar todos) de “selecionarTodos”. Todos os checks que serão selecionados terão o name “selecionar[]” (você pode utilizar o name que quiser).
<script type=”text/javascript”>
$(function(){
$(“input[name='selecionarTodos']“).selecionall({
“btnPrincipal”:”#btn-principal”, //botão
“btnLabel”:”Editar %n% selecionado%p%?”, //label do botao – %p% = plural , %n% numero de checks selecionados
“checkPrincipal”:”#selecionarTodos”, //principal check – o que ira selecionar todos
“checksSelecionar”:”selecionar[]“, //checks que serao selecionados
“defaultLabel”:”Selecione” //default label para o botao – caso nenhum check seja selecionado
});
});
</script>
Parametros
Selecionando o botão
“btnPrincipal”:”#btn-principal”
Botão que será habilitado/desabilitado caso algum check for selecionado.
Label do botão
“btnLabel”:”Editar %n% selecionado%p%?”
O label é alterado de acordo com a quantidade de checks selecionados. Para exibir a quantidade de checks selecionados, coloque %n%. Para alterar a mensagem do singular para o plural coloque %p%.
Checkbox Principal
“checkPrincipal”:”#selecionarTodos”
Checkbox principal – o check que ao ser selecionado , irá selecionar todos os outros da página (definidos com o parametro “checksSelecionar” )
Label default do botão
“defaultLabel”:”Selecione”
Caso nenhum check for selecionado, o valor default do botão é definido com o parametro “defaultLabel”
Faça o download do plugin – aqui (ou aqui http://arenageek.com/selecionall/jquery.selecionall.js)
http://arenageek.com/selecionall/
Caso não consiga visualizar os vídeos abaixo, clique aqui para assistir no screenr.
Se encontrar algum bug ou tenha alguma sugestão… “comentai”. Ou @eduardostuart
3 03UTC abril 03UTC 2010 Deixe um comentário
Para que alguns scripts funcionem corretamente, primeiramente a página deve estar completamente carregada, caso contrário poderá acontecer alguns erros na execução. Tradicionalmente o evento onload, faz com que as instruções sejam executadas só depois que a página for carregada completamente. A sintaxe seria:
<script type="text/javascript">
window.onload = function(){
//script
}
</script>
Isso faz com que o código seja executado somente depois que a página estiver totalmente carregada. A desvantagem de utilizar o window.onload é que o navegador não só atrasa a execução do código onload mas também espera o carregamento de todas as imagens da página e outros recursos externos . Caso tenha alguma imagem externa com um tamanho maior, os usuários / visitantes terão que esperar até o carregamento para que o script seja executado.
Como melhorar? Uma maneira de tornar a execução do script mais rápida seria utilizando a sintaxe:
<script type="text/javascript">
$(document).ready(function(){
//script
});
</script>
A diferença entre essa sintaxe e a anterior, é que ao invés de ter que esperar o carregamento das imagens da página, o visitante ira aguardar apenas o carregamento da estrutura do documento. Fazer isso de uma maneira cross-browser é um pouco complicado, porém com o jQuery esse processo fica mais fácil.
Outra vantagem de utilizar a segunda sintaxe, é que é possível utilizar múltiplas vezes dentro do mesmo documento HTML ao contrário do onload, que permite apenas uma única função.
Outra maneira seria utilizando a sintaxe de forma abreviada como:
<script type="text/javascript">
$((function(){
//script
});
</script>