Downloads Mais Sofisticados Com jDownload

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 se propõe a ser um assistente de downloads em jQuery para auxiliar as pessoas que baixam arquivos em seu site, apresentando informações pertinentes através de uma bonita interface promovida pelo jQuery UI.

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. 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, 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:

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!

Be Sociable, Share!

•