Webpoint

 
Depois de fazer um esforço para mudar a estrutura do plugin em como é chamado e não mais depender dos parâmetros do swfupload, refiz toda a lógica de opções do plugin e abstrair todas as opções do upload.

Sendo assim, o plugin agora só tem um parâmetro que são as opções do plugin. Antes passando as opções do swfupload o desenvolvedor poderia quebrar o funcionamento atual sobrescrevendo eventos. Nesta versão o plugin possui todas as configurações e assim pode extender e customizar sem afetar as atuais funcionalidades.

Documentação

Os requisitos para o funcionamento do plugin estão listado abaixo:

• jQuery v1.3.2
• SWFUpload v2.1
• jQuery UI 1.7 (usando somente o efeito de highlight)

Suporte:

• IE 7+
• Chrome 1+
• Firefox 3+
• Safari 3+

* Não houve teste no IE6

Utilização

Primeiro, você deve incluir o plugin e suas dependências:

 <link type="text/css" href="jquery.jqswfupload.css" rel="stylesheet" />

<script language="JavaScript" type="text/javascript" src="libs/jquery-1.3.2.min.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/jquery-ui-1.7.1.custom.min.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/swfupload.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/jquery.jqswfupload.js"></script>

Esta ordem é importante para que o plugin possa funcionar corretamente.

jqswfupload usa a biblioteca swfupload em conjunto com o jQuery. Então ele sobrescreve um simples input de arquivo com um sistema de upload múltiplos baseado em flash que possui todo o controle de progresso e tamanho do arquivo.

A marcação mínima para que o plugin possa funcionar está listada abaixo:

 <div id="upload-container">

<form action="upload.php" method="post" enctype="multipart/form-data">

<div id="upload-placeholder">

<input type="file" name="Filedata" />

<input type="submit" value="upload" />

</div>

</form>

</div>

Com esta marcação você pode invocar o plugin com as seguintes opções:

<pre>/*
* jQuery upload - main file
*/
$(document).ready(function(){
$("#upload-container").jqswfupload({
onUploadStart: function(file) {
$('#debug-bar').append('Upload Started: '+file.name);
},
onFileSuccess: function(file,data,response) {
$('#debug-bar').append('File success: '+ file.name + data);
},
onFileError: function(file,code,message){
$('#debug-bar').append('File Error: '+ file.name + message);
},
totalSize: '100 kb',
uploadUrl: upload_uri + 'upload.php',
// The post sent to server in the same request as the file object
post_params : {
'type' : 'swfupload',
'test' : 'val'
}
});
});</pre>

O plugin usa um parâmetro, um objeto literal de opções

 $('container').jqswfupload(options);

Opções do Plugin

• uploadUrl
  a url que ira receber a lógica do upload
  tipo: string
  padrão: '../upload.php'
• flashUrl
  o caminho do arquivo swf da biblioteca swfupload
  tipo: string
  padrão: "libs/swfupload.swf"
• buttomPlaceholderId
  O id do elemento usado para identificar o container e onde tem inserido o upload do tipo file
  tipo: string
  padrão: 'upload-placeholder'
• buttomImageUrl
  A url da imagem para adicionar o arquivo
  tipo: string
  padrão: 'images/icon-add.gif'
• buttomText
  O texto do botão. ex.: "adicionar arquivos"
  tipo: string
  padrão:vazio
• buttomWidth
  A largura em pixels do botão
  tipo: number
  padrão: 172

• buttomHeight
  A altura em pixels do botão
  tipo: number
  padrão: 22
• fileTypes
  Os tipos de arquivos permitidos. ex.: "*.jpg,*.png"
  tipo: string
  padrão: "*.*"
• fileSizeLimit
  O limite de cada arquivo
  tipo: number
  padrão: 10000
• multiple
  Definir se o upload será múltiplo
  tipo: boolean
  padrão: true
• cursorType
  Definir tipo de cursor
  tipo: string
  padrão: 'hand'
• dialogDescription
  O cabeçalho da descrição do diálogo de upload do browser
  tipo: string
  padrão: "Web Image Files"
• columns
  Os rótulos das colunas na interface de upload
  tipo: object
  padrão:
  columns: {
  file : 'File',
  size : 'Size',
  action : 'Action'
  }
• messages
  As mensagens usadas para darem as diferentes notificações
  tipo: object
  padrão:
  messages : {
  file_size_limit : 'You reach the total size',
  file_already_exist : 'Some(s) of the file already exist, the other(s) was included',
  browser_upload : 'Are you having problem with this upload? Try the common upload instead',
  start: 'Start upload',
  all_completed: 'All uploads are completed'
  }
• totalSize
  O tamanho total dos arquivos permitidos. Pode passar em bytes, kb ou MB
  tipo: string
  padrão: '5 MB'
• messageDelay
  O tempo que as mensagens de notifiação permanecem na tela
  tipo: number
  padrão: 3000
• post_params
  Dados adicionais enviados via post para cada tipo de arquivo no formato chave : valor
  tipo: object
  padrão: empty object

Callbacks

onFileQueue(file)
onDialogClose(files_selected,files_queued,total_queued)
onSwfuploadLoaded()
onUploadStart(file)
onUploadProgress(file,completed,total)
onFileComplete(file)
onFileError(file,error,message)
onFileSuccess(file,data,response)

//formato dos parametros adicionais

post_params : {

"post_param_name_1" : "post_param_value_1",

"post_param_name_2" : "post_param_value_2",

"post_param_name_n" : "post_param_value_n"

},

Para uma completa referência das opções do swfupload, veja a documentação do swfupload

Dúvidas frequentes

Aqui está uma lista das dúvidas frequentes que podem ocorrer ao utilizar o jqswfupload:

Qual a vantagem deste plugin em relação a utilizar o swfupload sozinho?

SWFUpload é uma ótima biblioteca utilizada amplamente em grandes projetos para realizar uploads múltiplos. Ela torna fácil a integração do flash com a interface web que não seja puramente nesta tecnologia. Entretanto, o swfupload tem muitos eventos, callbacks e opções que permite a flexibilidade para o desenvolvedor criar a experiência completa de upload utilizando javascript para criar todo o dom necessário para fazer isto acontecer. Este plugin é baseado na experiência do usuário utilizada no upload de fotos do Flickr. Toda a interface pode ser customizada por CSS. Com algumas vantagens, o jqswfupload estende as funcionalidades do swfupload, como progresso geral de arquivo e limitação de tamanho máximo da fila, não simplesmente limitar o tamanho de um único arquivo. O plugin foi construído para tornar este tipo de upload da "maneira jQuery de ser" que com uma linha você pode ter tudo funcionando e você tem o objeto de opções para ter o poder de mudar de acordo com sua necessidade.

O upload retorna um erro 404, o que pode ser isto?

Provavelmente a opção upload_url do swfupload não está correta. Não se esqueça de tornar o link absoluto ou relativo ao caminho do plugin.

Eu segui todos os passo na documentação, mas aina aparece um input de arquivos normal, o que pode ter acontecido?

Provavelmente você não colocou corretamento o arquivo swf ou não modificou a opção flash_url. Não se esqueça que esta opção é relativa ao template.

Eu posso customizar todas as opções do swfupload?

Sim, usando o plugin você consegue usar os eventos do plugin que são análogos a vários eventos do swfupload, a diferença é que eles são acionados depois da interface gerada, sendo assim você pode personalizar e executar as ações que desejar

Eu fiz download do plugin e o arquivo upload.php não tem nenhuma lógica de realizar upload, o que aconteceu?

O script upload.php simplesmente prova que a cada upload realizado o script é chamado. O script pode ser escrito em diferentes linguagens de servidor e é assumido que quem esteja utilizando este plugin tem algum conhecimento prévio com envio de upload e o está utilizando para melhorar a experiência do usuário que é prejudicada com o upload de arquivos ormal. Se tiver algum exemplo de implementação do script de upload, por favor, entre em contato

Gostaria de repassar para todos uma mensagem que recebi do John Resig enviado para todos os comitters do jQuery que o jQuery não irá mais usar o SVN como controle de versão. Todos o seu core será passado para o Git e todos que tinham acesso ao svn para enviar plugins (como eu) terá de remover os plugins do SVN para a base do jQuery ser migrada para o git. Desta forma somente o Core estará no controle de versão assim como os comitters serão somente os que participam do core.

Todo o codebase será migrado para o Git até 15 de Agosto. Sendo assim, o projeto não estará mais hosteado no GoogleCode, mas sim no Github:
http://github.com/jquery
Então se quiserem baixar o último código fonte do projeto a partir de 15 de Agosto terão que usar o clone do Git, ou visualizar o código no Github.

Por que a mudança?
Esta mudança está seguindo uma tendência normal de como o git vem crescendo para grandes projetos, por suportar múltiplos repositórios, controle de versao local, commits locais, merge automático (em alguns casos) e ser mais rápido que o SVN (e menos doloroso). Em relação aos plugins, o core do jQuery não irá mais se misturar com o restante do repositório e cada um pode gerenciar seus plugins da forma que lhe convir.
Para saber mais sobre o Git:
http://vainalousachefe.wordpress.com/2008/02/21/introducao-ao-controle-de-versao-local-com-git/

Há um tempo atrás escrevi um post do plugin jCalendar em português. Ele é bastante visitado e gostaria muito de oferecer uma solução atual para este plugin usando o próprio jQuery. Muito tempo passou e atualmente existem soluções melhores para ter uma ferramenta de escolhas de datas. o jQuery UI veio como uma luva para unificar plugins de interface e um dos seus componentes é o Datepicker. Com ele, você pode configurar um calendário para funcionar no formato nacional apenas passando as configurações adequadas, sem modificar o core.

Para utilizá-lo, é necessário fazer o download no site do jQuery UI. Esta biblioteca de plugins possui vários outros plugins que irei tratar no futuro, portanto se for utilizar mais alguma por conta própria baixe o pacote completo, caso contrário somente o plugin datepicker e o core do jQuery UI.

Após inseri-lo no head do documento, basta ter um simples input referenciado de alguma forma, preferencialmente id, para que ele possa ser acessado via seletor do jQuery e assim inicializado como no exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery Date picker</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="calendario.js"></script>
<link rel="stylesheet" type=text/css href="jquery-ui-1.7.2.custom.css" />
</head>
<body>
<form action="/" method="post">
<label for="calendario">Data:</label>
<input type="text" name="calendario" id="calendario" />
</form>
</body>
</html>

O arquivo calendário.js contém o seguinte conteúdo:

$(function(){
$("#calendario").datepicker({
dateFormat: 'dd/mm/yy',
dayNames: [
'Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'
],
dayNamesMin: [
'D','S','T','Q','Q','S','S','D'
],
dayNamesShort: [
'Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'
],
monthNames: [
'Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro',
'Outubro','Novembro','Dezembro'
],
monthNamesShort: [
'Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set',
'Out','Nov','Dez'
],
nextText: 'Próximo',
prevText: 'Anterior'

});
});

Ao passar as configurações acima o calendário se torna totalmente formatado para a forma nacional, simplesmente passando estes parâmetros. Há outras formas de personalização, como a faixa de anos exibida e outras configurações que pode ser consultadas na documentação. Os itens do exemplo acima são bastante auto-explicativo.

O estilo pode ser personalizado no arquivo css que vem junto com o plugin e o jQuery UI tem conceito de temas. Você pode escolher um tema para ele que adeque mais a sua situação, tão bem como criar um personalizado apenas modificando o CSS.

Exemplo do funcionamento do calendário deste post

Já expliquei em posts anteriores como usar o validade e como usar o Ajax Form. Agora irei mostrar como os dois em conjunto oferece uma solução completa para controle de formulários, validação cliente, remota e envio de dados por Ajax de uma forma simples, intuitiva, de fácil manutenção e para qualquer situação.

Será usado um exemplo prático com um formulário simples que possui os seguintes campos:

As validações que serão feitas serão as seguintes:

• Nome: é obrigatório e não poderá existir nomes duplicados (exemplo de validação remota)
• Idade: é necessário que seja número e não poderá ser maior que 18 (criação de um novo método de validação), já demonstrado anteriormente
• E-mail: precisa ser um e-mail válido
• País: precisa escolher ao menos uma opção

ler artigo completo

jQuery lança a versão 1.3 com uma série de melhorias significativas, principalmente quando se trata de perfomance. Assim que tiver mais informações publico aqui.

Maiores informações: jQuery 1.3

Boa noite pessoal. Gostaria de compartilhar com todos o momento que estou passando, mas isto vai ter que ficar para outro momento. Estou vendo as estatísticas dos termos pesquisados para entrar no blog e estou aflito! Tem muita gente buscando solução para upload de arquivos múltiplos! Devido a mudanças no jQuery que eu nem previa (o plugin interface, um dos melhores para jQuery ter sido abandonado e passado a ser padrão o jQuery UI o script que fiz não sei como funciona com outras versões do jQuery. A biblioteca SWFupload mudou muito também e melhorou muito e estou desenvolvendo baseado nela. O jQuery UI Uploader é a solução ideal para upload, mas não sei por que motivo ela não está tão bem documentada e tem dados muitos problemas.

Então mãos à obra!

A função de inserir arquivos Javascripts ou CSS sob demanda (através de um comando) deveria ser essencial no javascript. Existe alguns plugins para jQuery que faz isto como Javascript on demand, mas ainda faltava flexibilidade e a possibilidade de adicionar arquivos CSS.

Criei um plugin que insere no head do documento a tag script apontando para um script externo ou a tag link para um arquivo css. Você pode passar uma string como arquivo ou um array de arquivos para serem carregados. Ele não insere scripts duplicados, pois sempre verifica a existência do arquivo antes de inserir.

Sintaxe

$.include(String | Array url, Function callback);

Exemplos

//Javascript único
$.include('file.js');

//Você pode passar uma array de arquivos

$.include(['file01.js','file02.js']);

//Você pode especificar o diretório base para todos arquivos inclusos

$.ImportBasePath = '/foo/test/';

//Você pode inserir arquivos de diferentes formatos em um único array

$.include(['file01.js','file02.css']);

//O plugin suporta callback também
$.include(['file01.js',function(){
//code be executed when script loads
});

//Ainda não amplamento testado, você pode usar callbacks para scripts gerados

$.include(['file01.css',function(){
//code be executed when css loads
});

Utilidade

Ideal para inserir scripts sob demanda ou executar scripts e estilos em requisições Ajax

Por que não usar $.getScript?

O $.getScript é muito útil para carregar arquivos javascript, mas ele faz uma requisição ajax em que o retorno é avaliado e executado. O proposta deste plugin é criar um novo elemento no head do documento.

Compatibilidade

• Firefox 2+
• Internet Explorer 6+

Download

http://plugins.jquery.com/project/includedemand

Código fonte

http://code.google.com/p/jquerydevbrazil/source/browse/trunk/jquery.include.js

Pessoal, tomei a iniciativa de criar um local para todos que desenvolvem plugins aqui no Brasil publicarem.

O endereço é: http://code.google.com/p/jquerydevbrazil/

A idéia é manter um local acessível para o mundo, para compartilhar os plugins e manter a sua documentação original. O autor do plugin poderá manter uma documentação em português em seu blog, mas ter uma documentação em inglês no site do projeto. Através do SVN, o Google code permite um controle de código e edição em equipe. Assim, com o seu plugin plubicado neste local, ele poderá ser melhorado por outros integrantes.

Se quiser fazer parte deste projeto, basta entrar em contato, possuir algum plugin, ter conhecimento sobre SVN, ter uma conta no Google que eu irei enviar o convite.

Com isto, você será orientado de  como será os padrões para publicação.

Não tenho intenção nenhuma de tomar crédito pelos plugins criados pelos colaboradores que se interessarem, esta é apenas uma maneira de centralizar o desenvolvimento e criar um trabalho em equipe para podermos melhorar o que já foi criado da maneira mais prática e moderna.

Desta maneira também, o desenvolvedor pode ter seu plugin em português, mas ter uma referência global para outros que desejarem acessá-los.

Neste local também os membros poderam fazer uma inspeção maior e relatar erros e idéias de novos plugins.

Espalhem a idéia e vamos criar extensões para facilitar o nosso dia-a-dia e consequentemente da nossa equipe e vice-versa.

No site do projeto tem uma idéia de como funciona, pois nele eu publiquei um plugin para centralizar elementos.

E ai pessoal,

Gostaria de informar que agora faço parte da equipe do jQuery para desenvolvimento de plugins e melhoria da Framework e em breve irei publicar os plugins no site do jQuery . Aqui no Blog permanecerá uma documentação em português e no site de plugins do jQuery a documentação original em inglês, para todos poderem usufruírem.

Obrigado a todos que me ajudaram e espero poder continuar passando algo de bom para todos que desejam aprender e se aperfeiçoarem nesta framework.

Só recapitulando. Para quem não sabe, o jQuery é uma framework/biblioteca de javascript para facilitar o desenvolvimento web, principalmente nesta nova era de Ajax e Web 2.0. Ela possui ferramentas para trabalhar com manipulação do DOM, CSS, XML, Ajax e efeitos. Uma das suas grandes vantagens em relação às outras é a possibilidade de facilmente extendê-la, podendo manter "limpa" o seu código original e usar os plugins de acordo com a demanda.

Qualquer projeto reusável pode ser pensado como uma extensão do jQuery e tudo pode ser feito em termos de plugin, facilitando a reutilização do código e a sua manutenção.

Todos os plugins são livres e contém uma documentação de como são usados e ainda servem de lição para quem quer começar a desenvolvê-los. Mas para isto precisa saber e se aprofundar no javascript, que apesar dos pesares e da briga eterna de browsers, ela pode ser uma linguagem amiga e não uma inimiga do desenvolvimento. E o jQuery é a maior prova de que esta linguagem polêmica pode dar bons frutos.

Este plugin centraliza qualquer elemento através do método CSS da margem negativa.

Como usá-lo

Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.

$("class_or_id").center();

Você pode também especificar a direção de alinhamento

$("class_or_id").center({
 
    horizontal: false // somente vertical
 
});
 
$("class_or_id").center({
 
vertical: false //somente horizontal
 
});

O plugin no site do jQuery

http://plugins.jquery.com/project/elementcenter

Suporte

Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2.0

* Não funcionou no Firefox 3.0 e no Google Chrome. Estou tendo dor de cabeças com os dois ultimamente. Para mim uma grande decepção. Muitos Javascript estão lentos, assim como o Flash.

Irei trabalhar em uma próxima versão usando integralmente o Dimensions, que funciona muito bem.

Dependências

Este plugin requer o Dimensions plugin para funcionar corretamente

Página de teste

http://www.alexandremagno.net/jquery/plugins/center

Documentação original

http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin

Download

http://code.google.com/p/jquerydevbrazil/downloads/list

Autor

Alexandre Magno - http://www.alexandremagno.net

Licença

http://www.opensource.org/licenses/mit-license.php