Posts Tagged Jquery

Capturar erros Ajax é mais uma tarefa que o jQuery nos da uma boa ajuda.
O que quero dizer com isso é que a biblioteca nos fornece uma série de informações úteis que as vezes passam desapercebidas pelos desenvolvedores.
A primeira coisa a se notar é o evento error.
Neste evento podemos passar uma função(callback) que será executada quando a requisição falhar. São passados 3 parâmetros para esta função:
O objeto XMLHttpRequest, uma String que descreve o tipo do erro que aconteceu e um objeto exceção(opcional).
Uma boa observação é que nunca teremos o evento Success e o evento Error juntos na mesma requisição(meio óbvio isso).

Leia o resto desse post »

subscribe RSS feed!

Javascript é realmente uma linguagem de programação muito poderosa. Não falo isso só por ser apaixonado pela linguagem, mas sim por diariamente programar Javascript e ver o seu poder.
Frameworks ajudam claro, mas não se esqueçam que no fundo é tudo o mais puro e belo Javascript.
Na lista do Jquery que participo, seguido vejo algumas pessoas equivocadamente confundindo um pouco isso, mas isso fica pra um próximo Post.

Leia o resto desse post »

subscribe RSS feed!

Mais um da série de plugins testados e avaliados.
Particularmente eu achei esse plugin muito legal!
Ele aplica um efeito de Flip em um elemento HTML. Ai vai da imaginação e criatividade do desenvolvedor para implementa-lo em seu sistema.
A idéia é aquela básica do Jquery, pouquissímas linhas, e um efeito impressionante.
Estou esperando o momento certo e a idéia surgir para usa-lo em algum sistema…

Vamos ver como fica o código:

<script type="text/javascript">
     $(document).ready(function () {
         $(".home").click(function () {
              $("#flipBox").flip({
                   direction: 'bt',
                  color: 'blue',
                  speed: 400,
                  content: ""
            });
       });
      $(".home").trigger("click");
});
</script>

Simples não?

No click do elemento com a classe “home”  invocamos o método flip() que aplica esse efeito no elemento com Id “flipBox”.
Obs: $(“.home”).trigger(“click”) só faz com que a animação aconteça no load da página.
Aqueles parâmetros são interessantes:

• direction: Especifica em que direção vai ser o giro. Os valores suportados são ‘tb’, ‘bt’, ‘lr’, ‘rl’
• color: Define que cor de fundo o elemento terá após o giro.
• speed: A velocidade da animação
• content: O conteúdo que esse elemento terá após o giro.

Fora essas opções, ainda existem funções que podemos executar em algum evento do giro, como por exemplo:

• onBefore:  Essa função é executada antes da animação começar.
• onAnimation: Essa função é executada na metade da animação.
• onEnd: Essa função é executada quando a animação termina.

Com esses eventos e opções podemos fazer muita coisa. A opção content por exemplo permite que seja passado um conteúdo que será exibido no elemento após a animação, então nada nos impede de carregar um conteúdo com Ajax e jogar dentro desse elemento. O céu é o limite.

Vejam o resultado:

Minha Avaliação: Nota 10.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+,Opera

Site oficial do Plugin: http://lab.smashup.it/flip/

Download

subscribe RSS feed!

Um recurso muito bom que podemos aplicar em nossos Sistemas é o Autocomplete.
Isso ajuda muito o usuário na hora de selecionar uma opção. Além de ser visualmente mais agradavél, este recurso faz com que apenas apareçam as opções de acordo com o que é digitado no campo.
Imaginei a situação onde o usuário precisa selecionar um determinado valor em um <selectbox>. O porém é que esse campo será populado com centenas de valores. É extremamente ruim ter que ficar procurando a opção correta em uma lista enorme de opções.
O que esse plugin nos proporciona é uma forma simples de implementar um campo do tipo Autocomplete.

O exemplo que preparei é bem simples, mas mostra o poder deste plugin(um dos melhores que já usei).
O que vamos fazer é um script PHP que retorne os Posts aqui do Blog. Segue o código abaixo do arquivo search.php:

<?php
$items = array(
'Text Area Resizer - JQuery Plugin'=>'1',
'Text Limiter - Jquery Plugin'=>'2',
'Plugins Jquery'=>'3',
'theWebMind.org'=>'4',
'Hacks CSS'=>'5',
'Json'=>'6',
'PHP - Problema ao carregar a DLL php_pgsql.dll'=>'7',
'RichBlocks - Um Framework Para Implantar Interfaces RIA em Sistemas Web'=>'8',
'PHP Classes'=>'9',
'RIA - Aplicacoes Ricas para Internet'=>'10',
'Campanha Atualize o seu Navegador'=>'11',
'Internet Explorer 8'=>'12',
'Projeto PHP Counter'=>'13',
'Jquery'=>'14'
);

foreach ($items as $key=>$value){
echo "$key|$value\n";
}
?>

Note que neste código eu montei “na mão” um array de Posts. Mas nada me impediria de ter feito uma consulta no banco de dados e ter montado o array dinâmicamente. Isso serve para qualquer situação.
Bom, já temos os dados que precisamos para popular o campo de Autocomplete.
Basta criar um campo do tipo <input> com uma ID especifica. No meu ficou assim:

<body>
<p>
<label style="font-family:verdana;
font-weight:bold;
font-size:18px;">
Posts Jaydson.org:
</label>
<br>
<input style="width:300px;" type="text" id="posts" />
</p>
</body>

Agora que já temos o HTML, vamos implementar o Plugin.
O que deve ser feito é informar qual <input> será capaz de se autocompletar, desta forma:

<script type="text/javascript">
$().ready(function() {

$("#posts").autocomplete("search.php", {
width: 440,
scrollHeight: 220,
selectFirst: true
});
})
</script>

Desta maneira, o <input id=”posts”> receberá o conteúdo da página PHP que criamos anteriormente.

Nota: O Plugin ainda possui uma série de opções que podem ser especificadas além de width, scrollHeight e selectFirst .

Veja o resultado:

Minha Avaliação: Nota 10.0
Compatibilidade: Firefox 2.0+, IE 6+, Safari 3.0+, Chrome 2.0+

Site oficial do Plugin: http://docs.jquery.com/Plugins/Autocomplete

Download

subscribe RSS feed!