JavaScript Cheat Sheet (Standart, jQuery, MooTools, Prototype …)
Em 25/07/2009 by acalbuquerque
categorizado em AJAX, Destaques, JS/HTML, Tecnologia, jQuery
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.
Jquery : prettyPhoto lightbox
Em 28/04/2009 by acalbuquerque
categorizado em AJAX, Tecnologia, jQuery
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
Em 28/04/2009 by acalbuquerque
categorizado em AJAX, Tecnologia, jQuery
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
Em 26/03/2009 by acalbuquerque
categorizado em AJAX, Destaques, JS/HTML, Tecnologia, 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
Ajax Instant Messenger
Em 18/03/2009 by acalbuquerque
categorizado em AJAX, Destaques, JS/HTML, Tecnologia
Fala galera!
Encontrei esse sistema feito em ajax com auxílio da biblioteca Prototype.
Se resume em um sistema no estilo MSN bem feito, bonito e simples de usar e modificar.
Vamos configurar a sua instalação:
1°- Abra o arquivo config-sample.php e preencha os campos relacionados à conexão com o BD.
// MySQL Database Configuration
$sql_user = 'user';
$sql_pass = 'pass';
$sql_host = 'localhost';
$sql_db = 'ajaxim';
// This is the prefix for the ajax im MySQL tables -- this can usually be left alone.
// (If upgrading from a version < 3.1, set the prefix to '')
define('SQL_PREFIX', 'ajaxim_');
$maxBuddyIconSize = 100; // in KBs, set to 0 to disable uploads
Depois de feito, renomeie o arquivo para config.php
2°- É opcional, porém caso deseje mudar alguns parâmetros de configuração como titulo do sistema, tamanhos e talz... acesse o arquivo js/config.js.
3°- Mude a permissão de pasta buddyicons/ para CHMOD 0777.
4°- Execute no Browser o install.php e siga as intruções.
5°- Após tudo feito, delete os arquivos install.php e update.php
E pronto! Agora é só adpatar e utilizar esse sistema em qualquer lugar.
Ler arquivos CSV com jQuery
Em 05/03/2009 by acalbuquerque
categorizado em AJAX, JS/HTML, Tecnologia, 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édiaNo 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>
