Posts Tagged Jquery-Plugins

Catch Ajax errors is a task that jQuery gives us a good help.
What I mean by that is that the library provides us with a lot of useful information that often go unnoticed by developers.
The first thing to note is the error event.
In this event we can pass a function (callback) that will be executed when the request fails.
3 parameters are passed to this function: The XMLHttpRequest object, a String that describes the type of error that occurred and an exception object (optional).
A good point is that we will never have the Success and Error event together in the same request (that means obvious).

Read the rest of this entry »

subscribe RSS feed!

Veja aqui o exemplo: http://jaydson.org/code/jquery/plugins/gradient/index.html

Javascript is a very powerful programming language . Do not say this only because i love the language, but for daily work with Javascript and see its power.
Frameworks help of course, but do not forget that everythingh is all the more pure and beautiful Javascript.
In the list that I participate, I see some people mistakenly confuse it a little, but it’s coming the next Post.

Read the rest of this entry »

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!