Twitter signin com jQuery

De fato o twitter trouxe sua contribuição para a WEB. Não estou falando apenas do simples porém eficaz negócio de mensagens curtas, mas também do seu design e funcionalidades.

Basta olharmos para a nova homepage com um design limpo e fácil que inspira muitos outros serviços a fazerem o mesmo. Sendo assim notamos no canto superior direito da página inicial do Twitter e veremos o sinal no botão que será suspenso o formulário de login.

Assim, Lam Nguyen ensinou como criar um login drop down com estilo Twitter utilizando jQuery aqui.

jQuery Tools

Esta biblioteca(jQuery Tools) contém seis das ferramentas mais úteis do Javascript disponíveis para um site de hoje. A beleza desta biblioteca é que todas essas ferramentas podem ser usadas juntas. No final, você pode ter centenas de elementos diferentes e novas maneiras de usar a biblioteca.

Esta biblioteca é de código fonte aberto e de licensa  dupla, MIT e  GPL 2 .

O pacote contém uma série de demos, incluindo:

• Tabs
• Tooltips
• Expose
• Overlay
• Scrollable
• Flashembed

JavaScript Cheat Sheet (Standart, jQuery, MooTools, Prototype …)

Seguindo os post´s de guias e referências, segue mais um unindo vários Cheat Sheet´s de frameworks em JS.

- JavaScript Standart Cheat Sheet

Logicamente organizado em métodos DOM, funções, expressões regulares, etc . É fácil de usar e uma grande referência para todos os usos comuns JavaScript. Clique aqui para baixar.

- jQuery Visual Map

Tenho certeza que esse é bastante conhecido. Apenas não pude deixa-lo de fora. Clique aqui para vizualizar.

- MooTools Cheat Sheet

Para aqueles que preferem o MooTools que  jQuery, segue esse guia baseado no MooTools 1.2. Clique aqui para vizualizar.

- Prototype Cheat Sheet

É um excelente recurso para aqueles que utilizam Prototype.js e inclui uma referência visual para deslocamentos e dimensões. Clique aqui para vizualizar.

FireQuery 0.3

FireQuery é uma das coleções de acessórios que existem para Firebug que analisa o jQuery.
Características:

* Expressões jQuery são apresentadas no Console do firebug e DOM Inspector
* Os dados jQuery são anexados na primeira classe cidadãos
* Elementos em jQuery são destacados
* JQuerify: permite-lhe escrever jQuery em qualquer página

Página Oficial:  http://firequery.binaryage.com/
Ou baixe em complementos do firefox.

** requer Firebug 1.3+

Jquery : prettyPhoto lightbox

Stephane Caron escreveu um bonito e simples plug-in lightbox em jQuery.
O prettyPhoto LightBox, como é chamado, possui algumas opções diferentes de exibição e uma sintaxe fácil:

   <a title="Description" rel="prettyPhoto" href="images/fullscreen/1.jpg">
       <img src="images1.jpg" alt="Picture" />
   </a>

*ps: Adicionar rel = “prettyPhoto” a qualquer foto que você deseja ativar o recurso prettyPhoto

jQuery: Sparklines Plug-in

Edward Tufte tem tido uma longa sequência de fãs no domínio da visualização de informação.
Entre suas interessantes aplicações de visualização, a mais conhecida é o “Sparkline”.

A documentação, exemplos e o download do plug-in pode ser facilmente encontrado no site oficial.

O resultado do jQuery plug-in é muito bom.
*ps: E há também um gerador Sparkline simples para o Google-Charts no style.org.

Jcrop: O Crop-plugin em JQuery

** Essa é uma tradução não oficial do manual do plugin Jcrop. Para mais informações e download visite o site oficial.

Jcrop é a maneira fácil e rápida de adicionar imagem para a sua aplicação web. Ele combina a facilidade de uso típico de um plugin jQuery com a poderosa plataforma crop-engine em DHTML. Licença FREE – MIT

Visão geral:

* Atribuição não-obstrusiva para qualquer imagem
* Suporta travamento de proporção
* Suporta definição de MINSIZE / MAXSIZE
* Desfazer a selecção feita, ou enquanto se deslocam
* Teclado nudging(com detalhes do crop) para apoio à selecção
* Características da API para criar interactividade, incluindo animação

* Suporte para CSS

Compatibilidade Cross-browser

* Firefox 3
* Safari 3
* Opera 9.5
* Google Chrome 0.2.x
* Internet Explorer 6+

- Primeiros passos

* Faça o download da versão atual do Jcrop
* Coloque os arquivos em seu servidor web para que você possa solicitar-los de sua página
* Você também deve ter instalado a biblioteca  jQuery

Dentro da tag <head> você precisa carregar os arquivos necessários. Isso inclui:

* Biblioteca jQuery
* Jcrop Javascript
* Jcrop estilo CSS
* Protótipo da função

Ficando assim:

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>

Vamos supor que nossa imagem esteja assim:

<img src=”flowers.jpg” id=”cropbox” />

Por padrão, o Jcrop se comporta assim como nesse exemplo1.

O jcrop possui 2 eventos:

onSelect -> chamado quando a seleção estiver concluída

onChange -> chamado quando a seleção está se movendo

Função de eventos:

<script>
     // Lembre de chamar com jquery(window).load(...)
     // Senão, o jquery pode não inicializar a propriedade

	jQuery(document).ready(function(){

		jQuery('#cropbox').Jcrop({
			onChange: showCoords,
			onSelect: showCoords
		});
	});

	function showCoords(c)
	{
		jQuery('#x').val(c.x);
		jQuery('#y').val(c.y);
		jQuery('#x2').val(c.x2);
		jQuery('#y2').val(c.y2);
		jQuery('#w').val(c.w);
		jQuery('#h').val(c.h);
	};

</script>

Veja o Exemplo2

Para mais exemplos e informações, acesse o site do manual oficial

Ler arquivos CSV com jQuery

Comma-separated values (ou CSV) é um formato de arquivo que armazena dados tabelados, cujo grande uso data da época dos mainframes. Por serem bastante simples, arquivos .csv são comuns em todas as plataformas de computador.

O CSV é um implementação particular de arquivos de texto separados por um delimitador, que usa a vírgula e a quebra de linha para separar os valores. O formato também usa as aspas em campos no qual são usados os caracteres reservados (vírgula e quebra de linha). Essa robustez no formato torna o CSV mais amplo que outros formatos digitais do mesmo segmento.

Formalmente, o CSV é um formato de dados delimitado que possui campos (colunas) separados por caracteres de vírgula e registros (linhas) separados por caracteres de quebra de linha. Campos que contêm caracteres especiais (vírgula, quebra de linha ou aspas) devem ser envolvidos em aspas. Entretanto, se uma linha contiver uma única entrada que seja uma cadeia vazia, ela também pode ser envolvida por aspas. Se um campo contiver um caractere de aspas, ele é discernido posicionando outro caractere igual logo em seguida. O formato CSV não requisita uma codificação de caracteres, uma ordenação de bytes ou um formato de terminador de linha.

Ex:

1997	Ford	E350	ac, abs, moon	3000.00
1999	Chevy	Venture “Extended Edition”		4900.00
1996	Jeep	Grand Cherokee	MUST SELL! air, moon roof, loaded	4799.00

A tabela acima pode ser ser representada em CSV da seguinte maneira:

1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""",,4900.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00

Fonte: Wikipédia

No blog de Antonio Basilio Neto, ele demonstra que existe um plugin para jquery que através dele você pode ver de forma amigável arquivos CSV na web, o csv2table.

Sua utilização é relativamente muito simples, basta ter o jquery na página juntamente com a utilização do plugin, após é só chamar a função com o local do arquivo e onde ele deve ser aberto na página, exemplo:

<script src=”./js/jquery-1.2.6.min.js” type=”text/javascript”></script>

<script src=”./js/jquery.csv2table-0.02-b-2.8.js” type=”text/javascript” charset=”utf-8″></script>
<script>

$(function(){

$(’#view0′).csv2table(’./data/Book12.csv’);

});

</script>