Gradient – Jquery Plugin


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.

O que vou abordar neste Post é um plugin muito bom desenvolvido pelo Brandon Aaron.
Pra quem não conhece, esse cara mora lá pelas bandas do Texas e é um dos principais membros do time de desenvolvedores do Jquery.

A idéia básica do plugin é criar um efeito de Gradient(vai de uma cor para outra) em um elemento HTML. Isso mesmo! Nada de Photoshop. \O/
O que precisamos:  obviamente o Jquery, e o plugin Gradient.

Mas dessa vez vou um pouco mais além…
O plugin nos permite especificar o código RGB inicial, o o código RGB final e ainda a direção do Gradient(vertical ou horizontal).
Vamos ver o código pra entender melhor:

$('#meu_elemento').gradient({
from:      'ffffff',
to:        '000000',
direction: 'vertical';
});

Neste exemplo o efeito Gradient será aplicado no elemento com o ID meu_elemento, começando de branco e indo até preto com direção vertical.
Simples !

Bom, mas como eu disse acima, vamos um pouco mais além.  Se precisamos passar valores RGB para o plugin, então quem sabe podemos usar um outro plugin bem conhecido e muito bom também, o Color Picker.
Preparei um script onde uso as funcionalidades dos  2 plugins. Vejam abaixo como ficou. E novamente vejam o poder do Javascript:

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

Espero que tenham gostado e que seja útil para alguma Aplicação de vocês.
Qualquer dúvida comentem ai.
Abraço, e até a próxima.

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

Site oficial do Plugin: http://brandonaaron.net/code

Download

Download

Related Posts:

Creative Commons License
The Gradient – Jquery Plugin by Jaydson Gomes, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Brazil License.

subscribe RSS feed!

, ,

  1. #1 by Ruan Carlos at 20 de maio de 2009

    Cara, muito bom, mais está com um bug (pelo menos no ff) quando eu seleciono a cor ele não joga o valor para o textbox.

    Só isso, parabéns.

  2. #2 by Robson Almeida at 20 de maio de 2009

    No Chrome acontece o mesmo quando seleciono a cor…

    Mas ficou muito bom baguan keliê!

    Parabéns!

  3. #3 by jaydson at 23 de maio de 2009

    Fla Ruan.
    Pois é..notei este bug só depois do teu comentário. Valeu a dica.
    Consertei já…pode dar uma conferida.
    Abraço!

  4. #4 by jaydson at 23 de maio de 2009

    Ai Robson. Valeu!
    Da uma testada agora que foi solucionado o bug.

(não será publicado)
  1. Sem citações ainda.
Free the web