Archive for the ‘jQuery’ Category

Limitando números de caracteres em um textarea


16 abr

Uma das coisas mais “chatinhas” de se fazer, são as benditas validações, principalmente de limitar quantidades de caracteres em um determinado campo.

Isso ficou mais simples usando o um pluggin jQuery, como nessa página de exemplo: DEMO

O seu HTML deve ficar assim:

(mais…)

Sliders interessantes com jQuery


13 out

Exiba as imagens do seu site de uma maneira diferente e suave com este plugin.

Veja o exemplo

(mais…)

Eventos jQuery


13 jul
  • blur():jQuery. Dispara o evento blur (perda de foco) para cada elemento selecionado.
  • blur(função):jQuery. Associa uma função ao evento blur (perda de foco) para cada elemento selecionado.
  • change():jQuery. Dispara o evento change (alteração) para cada elemento selecionado.
  • change(função):jQuery. Associa uma função ao evento change (alteração) para cada elemento selecionado.
  • click():jQuery. Dispara o evento click (clique) para cada elemento selecionado.
  • click(função):jQuery. Associa uma função ao evento click (clique) para cada elemento selecionado.
  • dblclick():jQuery. Dispara o evento dblclick (duplo clique) para cada elemento selecionado.
  • dblclick(função):jQuery. Associa uma função ao evento dblclick (duplo clique) para cada elemento selecionado.
  • error():jQuery. Dispara o evento error (erro) para cada elemento selecionado.
  • error(função):jQuery. Associa uma função ao evento error (erro) para cada elemento selecionado.
  • focus():jQuery. Dispara o evento focus (foco) para cada elemento selecionado.
  • focus(função):jQuery. Associa uma função ao evento focus (foco) para cada elemento selecionado.
  • keydown():jQuery. Dispara o evento keydown (pressão sobre uma tecla) para cada elemento selecionado.
  • keydown(função):jQuery. Associa uma função ao evento keydown (pressão sobre uma tecla) para cada elemento selecionado.
  • keypress():jQuery. Dispara o evento keypress (pressão sobre uma tecla e sua liberação) para cada elemento selecionado.
  • keypress(função):jQuery. Associa uma função ao evento keypress (pressão sobre uma tecla e sua liberação) para cada elemento selecionado.
  • keyup():jQuery. Dispara o evento keyup (liberação de tecla) para cada elemento selecionado.
  • keyup(função):jQuery. Associa uma função ao evento keyup (liberação de tecla) para cada elemento selecionado.
  • load(função):jQuery. Associa uma função ao evento load (carregamento) para cada elemento selecionado.
  • mousedown(função):jQuery. Associa uma função ao evento mousedown (pressão do botão do mouse) para cada elemento selecionado.
  • mouseenter(função):jQuery. Associa uma função ao evento mouseenter (mouse passa a estar sobre um elemento) para cada elemento selecionado.
  • mouseleave(função):jQuery. Associa uma função ao evento mouseleave (mouse deixa de estar sobre um elemento) para cada elemento selecionado.
  • mousemove(função):jQuery. Associa uma função ao evento mousemove (movimentação do mouse) para cada elemento selecionado.
  • mouseout(função):jQuery. Associa uma função ao evento mouseout (mouse deixa de estar sobre um elemento) para cada elemento selecionado. Mouseout dispara quando o ponteiro do mouse “entra” ou “sai” de um elemento-filho, enquanto o mouseleave não.
  • mouseover(função):jQuery. Associa uma função ao evento mouseover (mouse passa a estar sobre um elemento) para cada elemento selecionado. Mouseover dispara quando o ponteiro do mouse “entra” ou “sai” de um elemento-filho, enquanto o mouseenter não.
  • mouseup(função):jQuery. Associa uma função ao evento mouseup (liberação do botão do mouse) para cada elemento selecionado.
  • resize(função):jQuery. Associa uma função ao evento resize (redimensionamento) para cada elemento selecionado.
  • scroll(função):jQuery. Associa uma função ao evento scroll (rolagem) para cada elemento selecionado.
  • select():jQuery. Dispara o evento select (seleção) para cada elemento selecionado.
  • select(função):jQuery. Associa uma função ao evento select (seleção) para cada elemento selecionado.
  • submit():jQuery. Dispara o evento submit (envio de dados de formulário) para cada elemento selecionado.
  • submit(função):jQuery. Associa uma função ao evento submit (envio de dados de formulário) para cada elemento selecionado.
  • unload(função):jQuery. Associa uma função ao evento unload (descarregamento) para cada elemento selecionado.

Plugin interessante estilo ao Lightbox


09 jul

Existem vários sites, que usam plugins jQuery para álbuns fotográficos, galerias de fotos e imagens em geral, e sempre ficamos limitados a determinados plugins e acabamos nos acostumando e deixando de conhecer novos e interessantes plugins para fotos com jQuery.

O pirobox por exemplo é um plugin diferente e dificilmente visto em sites, porém é facilmente de ser usado e de visual mais sofisticado.

Para conhecer o plugin, clique aqui

Validando Campos com jQuery


23 jun


<html>
<head>
<title>Validando Campos com jQuery</title>
<script language="javascript" src="javascript/jquery.js"></script>
<script>
$('document').ready(function(){
//no click do botão v os verificar se os campos não estao vazios
//#botao é o id do button do formulario
// .click é o evento do click do botão do formulario
$('#botao').click(function(){
// #nome é nosso id do campo nome
// .val() é uma função do jquery que recupera o valor que existe no campo
var nome = $('#nome').val();
var email = $('#email').val();
//verifica se o campo nome esta vazio
if(nome != ''){
//verifica se o campo email esta vazio
if(email != ''){
//nesta parte pode se chamar o JSON, para algum cadastro ou consulta
}
else{
//alerta na tela que o campo esta vazio
alert('Campo Email obrigatório!!!');
//adiciona um css com as bordas do input vermelhas
$('#email').css('border: 1px solid red');
}
}
else{
//alerta na tela que o campo esta vazio
alert('Campo Nome obrigatório!!!');
//adiciona um css com as bordas do input vermelhas
$('#nome').css('border: 1px solid red');
}
})
})
</script>
</head>
<body>
<form id='fcad' name='fcad' action='' method='post'>
<table>
<tr>
<td>Nome:</td>
<td><input type='text' id='nome' name='nome' /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type='text' id='email' name='email'></td>
</tr>
<tr>
<td colspan='2'><input type='button' id='botao' name='botao' value='Enviar'></td>
</tr>
</table>
</form>
</body>
</html>