Muestra información sobre los archivos descargables con jDownload. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Javascript

¡votar!

Muestra información sobre los archivos descargables con jDownload

jDownload es un plugin de jQuery que tiene como objetivo proporcionar más información a los usuarios finales sobre el archivo que será descargado de nuestra aplicación.

Una vez que el usuario pulsa sobre el enlace de descarga, se envía una consulta de Ajax a un archivo PHP que devuelve el nombre, tipo y tamaño del archivo en una ventana modal.

Cuando el usuario ve la información del archivo que quiere descargar, puede aceptar la descarga o cancelar la misma, siendo muy útil esta opción.

Para el funcionamiento, el plugin requiere de las librería jQuery y jQuery UI, además de permitir la personalización del cuadro de diálogo, modificando en parte su apariencia.

Veamos como funciona este plugin para jQuery.

Lo primero que hacemos es incluir las librerías necesarias en nuestro proyecto.

<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>
<link rel="stylesheet" href="jDownload/jquery.jDownload.css" />
<script type="text/javascript" src="jDownload/jquery.jDownload.min.js"></script>

Ahora, a las zonas que tendrán algo para descargar, le añadimos la clase que hará que se lance la petición al plugin, mostrando la información.

<script type="text/javascript">
$(document).ready(function() {
/* basic usage */
$('.download').jDownload();
/* custom settings */
$('.download').jDownload({
event : 'hover',
dialogWidth : 300,
dialogHeight : 150
});
});
</script>
<p><a href="files/image1.jpg" class="download" title="This is image 1">Download here</a></p>
<p><a href="files/image2.jpg" class="download" title="This is image 2">Download here</a></p>
<p><a href="files/image3.jpg" class="download" title="This is image 3">Download here</a></p>
<p><a href="files/image4.jpg" class="download" title="This is image 4">Download here</a></p>

Pueden ver más información en su página oficial.