DES 84 - Blog of DES84 Website

Sempre, sempre jQuery, declaradamente meu framework preferido. Nomeado de Kwicks o sample foi todo desenvolvido em jQuery, mais um plugin muito r0x e muito simples mesmo de utilizar, um salve para Jeremy Martin.

Usando de um menu simples feito em lista (ul):

<ul class="kwicks" > 
     <li id="kwick1"></li> 
     <li id="kwick2"></li> 
     <li id="kwick3"></li> 
     <li id="kwick4"></li> 
</ul>

O estilo voce faz como preferir respeitando as config abaixo:

.kwicks li{ 
     float: left; 
     width: 125px; 
     height: 100px; 
     margin-right: 5px; 
}

e por fim so ativar o plugin na classe ‘Kwicks’ colocada na tag ‘ul’:

$().ready(function() {
    $(’.kwicks’).kwicks({
        max : 205,
        spacing : 5
    });
});

Para funcionar perfeitamente, claro, deve importar o js do jQuery e outro do Kwicks:

Kwicks uncompressed
Kwicks packed

Espero que gostem, bem simples mas com um resultado muito expressivo, como diz o próprio slogan do jQuery: "escreva menos e faça mais".  Cya.

Link: Kwicks for jQuery

Quem trabalha com web hoje em dia, com Coding principalmente, encontra em diversos sites fontes muito interessantes de jQuery. Esse danado, que amo (lol), não serve somente para dar uma vida, animadinha, no site, ele vai muito além.

Com jQuery você pode validar forms em realTime usando efeitos de fade ou slide nas suas mensagens, pode fazer seus campos de texto ou tags como H1 serem editáveis com projetos em Ajax e muito mais, fora as animações é claro.

No site “Web Dev Lounge” encontrei um tuto muito legal para iniciantes nessa biblioteca de JavaScript, fácil dimais de utilizar e muito bom para expandir. Link abaixo.

Link: jQuery for Dummies on Web Dev Lounge

Cada dia que passa fico mais impressionado com os poderes do jQuery. Hoje pesquisando mais sobre o infeliz encontrei algo muito interessante, um menu dropdown com multiplas opções, colunas e sub opções. Complicado de imaginar isso sem ver funcionando. O addict do jQuery tem 47k, incluindo a biblioteca base e ainda é XHTML válido.

Acesse o link do post original no labs do Gíva para fazer download do Dropdown. Link e print abaixo:

Link: http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

Como novo ‘jQuery Lover’ que sou não podia deixar de mostrar esse plugin para Chart do jQuery muito fácil de trabalhar, chamado: Flot.

Muito fácil de trabalhar e com uma interface muito simples de compreender, o Flot é um plugin que funciona junto com a biblioteca do jQuery que cria resultados em gráficos muito legais. Abaixo vou deixar o link para download e visualização dos demonstrativos.

DEMO: http://people.iola.dk/olau/flot/examples/
DOWNLOAD: http://code.google.com/p/flot/

Estou ficando muito velho. Começar um post com essa frase parece crise dos 30 (e olha que nem cheguei em 25 anos ainda eheh), mas muita coisa dentro dos oito anos de internet que tenho ja mudaram e mudam todos os dias. Depois de muito rodar e optar muitas vezes pelo flash para animar certas coisas bem simples em algumas páginas, optei por conhecer e usar algumas bibliotecas em Javascript. Mas uma delas me agradou muito; jQuery.

Basicamente o jQuery parece um animador Javascript, mas conhecendo melhor vemos que é muito alem disso. Nesse post de hoje vamos falar sobre ToolTip e Image View feito em JS.

Originalmente postado no site do CSSGlobe, e baixado clicando aqui.

Recomendo, muito simples de entender. Somente para illustrar o Tooltip - primeiro exemplo - é feito um link normal em HTML:

<a href=”http://cssglobe.com” class=”tooltip” title=”Web Standards Magazine”>Roll over for tooltip</a>

O jQuery utiliza o texto colocado dentro do parametro ‘title’ dentro da tag ‘a’ para criar o Tooltip com um fade muito discreto e interessante. A partir desse exemplo segue os outros dois com fade em imagens, também muito legal.

Para utilizar desses efeitos basta incluir em seu codigo HTML o arquivo Javascript do jQuery, que pode ser baixado via Google Code em : http://code.google.com/p/jqueryjs/downloads/list

Espero que gostem e bom inicio de semana.