Dependendo da categoria e tipo do site, é possível que, nele, arquivos grandes para download sejam disponibilizados e, para garantir uma melhor qualidade do site desenvolvido, disponibilizar aos visitantes recursos de interatividade, que dão “up” ao visual e à “agradabilidade” deste site tornam-se um diferencial.
Um destes recursos poderia ser um jeito de propiciar downloads mais atrativos e sofisticados, mostrando informações pertinentes ao download em um visual agradável. Esta é justamente a proposta do jDownload! O jDownload [4] se propõe a ser um assistente de downloads em jQuery [5] para auxiliar as pessoas que baixam arquivos em seu site, apresentando informações pertinentes através de uma bonita interface promovida pelo jQuery UI [6].
Como usar o jDownload
Assim como a maioria dos plugins para jQuery, instalar e usar o jDownload é bastante simples. Primeiramente, faça o download do jDownload [7]. Então, você deve puxar os arquivos complementares necessários para seu correto funcionamento. É 1 CSS e 2 javascript. Você pode baixar e usar tais arquivos, mas, para facilitar, vamos usar, em nosso exemplo, estes arquivos baixados através dos respectivos CDNs oficiais da seguinte maneira:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>Claro, você também deve inserir o arquivo do próprio jDownload e o pequeno CSS que o acompanha:
<link rel="stylesheet" href="jDownload/jquery.jDownload.css"/>
<script type="text/javascript" src="jDownload/jquery.jDownload.min.js"></script>Depois disso, basta, com os seletores jQuery [8], especificar em quais elementos o jDownload vai atuar. Por exemplo, vamos supor que se queira usar em todos elementos que tenha a classe “download”. O código fica da seguinte maneira:
$(document).ready(function() {
$('.download').jDownload();
});Com isso, sempre que um elemento tiver a classe “download”, ele vai exibir a interação proporcionada pelo jDownload, exibindo uma caixa de diálogo com informações detalhadas para o arquivo que será baixado.
Caso não queira usar um elemento HTML de link e quiser “simular”, usando alguma div, botão ou qualquer outro, o jDownload também permite especificar o caminho do arquivo através de alguns simples parâmetros. Por exemplo:
<script type="text/javascript">
$(document).ready(function() {
$('#download').jDownload({
filePath : 'caminho/para/arquivo/imagem.jpg',
dialogDesc : 'Baixar a imagem!' /* descrição */
});
});
</script>
<div id="download">Download personalizado</div>Opções do jDownload
O jDownload possui algumas opções para tornar os downloads ainda mais customizados e interessantes:
| Parâmetro | Valor Padrão | Descrição |
|---|---|---|
| root | / | Caminho para o jDownload. |
| filePath | null | Caminho para o arquivo a ser baixado |
| event | ‘click’ | Evento que “dispara” o jDownload |
| start | null | Função para quando o jDownload é iniciado |
| stop | null | Função para quando o jDownload é finalizado |
| download | null | Função para quando o jDownload iniciar o download |
| cancel | null | Função para quando o jDownload for cancelado |
| showfileInfo | true | Informação na caixa de diálogo: nome do arquivo, tipo e tamanho |
| dialogTitle | ‘jDownload’ | Título para a janela que se abre |
| dialogDesc | ‘Download the file now?’ | Descrição para a janela (se existir, o atributo “title” é usado) |
| dialogWidth | 400 | Largura da janela |
| dialogHeight | ‘auto’ | Altura da janela |
| dialogModal | true | Se a janela será modal ou não |
Então, por exemplo, se quisermos exibir uma interação do jDownload em uma div para que a janelinha que se abrirá tenha o título “Download Espetacular” e janela de 300x300px, teríamos o seguinte código javascript:
<script type="text/javascript">
$(document).ready(function() {
$('#download').jDownload({
filePath : 'caminho/para/arquivo/imagem.jpg',
dialogTitle: 'Download Espetacular!',
dialogHeight: 300,
dialogWidth: 300,
dialogDesc : 'Baixar a imagem!'
});
});
</script>
<div id="download">Download Espetacular!</div>Com isto, usando o jDownload e alguns poucos parâmetros, você pode fazer com que os downloads de seu site sejam bem mais agradáveis, informativos e úteis aos visitantes.
Bons downloads! 
