El árbol de archivos jQuery es un plugin de navegador AJAX configurable para jQuery. Permite crear un árbol de archivos completamente personalizado e interactivo con tan sólo una lÃnea de código JavaScript.
Actualmente, los scripts conectores del lado del servidor están disponibles para PHP, ASP, ASP.NET, JSP, y Lasso. Si eres un desarrollador, puedes fácilmente hacer tu propio conector para trabajar con tu idioma de preferencia.
Propiedades
- Produces XHTML válido y semántico.
- Completamente personalizable mediante CSS.
- Posibilidad de estilar los iconos dependiendo de la extensión del archivo.
- Usa AJAX para buscar información de archive en la marcha.
- Fácil de configurar y poner en práctica.
- Incluye scripts conectores para PHP y ASP.NET (C #)
- Soporta scripts conectores personalizados para una funcionalidad extendida.
- Evento de expandir/contraer personalizable
- Soporta funciones de aceleración jQuery
- Vistas de carpetas singulares y multiples
- Mensaje de carga configurable
Compatibilidad
jQuery File Tree requiere jQuery 1.2.6 o superior y ha sido probado en los siguientes navegadores:
- Internet Explorer 6 & 7
- Firefox 2 & 3
- Safari 3
- Chrome
- Opera 9
Demo
Aquà podrás ver una demostración del árbol de archivo con varias opciones.
Descarga
Creando el árbol de archivos
La forma sencilla es crear el árbol utilizando el siguiente código:
Dónde #container_id es la ID de un elemento DIV vacÃo que existe en tu página. El árbol de archivo cargará automáticamente cuándo cargue tu página.
Configurando el árbol de archivos
Los parámetros son pasados como un objeto a la función fileTree(). Algunas opciones válidas son:
|
Parámetero |
Descripción |
Valor por defecto |
| root | Carpeta ruta para mostrar | / |
| script | locación del archive AJAX serverside a utilizar | jqueryFileTree.php |
| folderEvent | Evento para activar expandir/colapsar | click |
| expandSpeed | Velocidad para ampliar las marcas (en milisegundos), el uso -1 es para ninguna animación | 500 |
| collapseSpeed | Velocidad para contraer las marcas (en milisegundos), el uso -1 es para ninguna animación | 500 |
| expandEasing | Función de aceleración para usar al expandir | None |
| collapseEasing | Función de aceleración para usar al contraer | None |
| multiFolder | Si hay que limitar o no al navegador a una subcarpeta por vez | true |
| loadMessage | Mensaje que se muestra mientras carga el árbol inicial (puede ser HTML) | Loading... |
Para crear un árbol de archivo con parámetros múltiples, tu código deberÃa lucir asÃ:
Estilando el árbol de archivo
El árbol de archivos depende del 100% en CSS para darle estilo. Para dar a tus usuarios una experiencia estética, deberÃas o utilizar la hoja de estilos incluidos para tu árbol de archivos o crear una propio. Debes referirte a jqueryFileTree.css para hacer cualquier cambio en los estilos.
Manejando el Feedback
Cuando se selecciona un archivo, el árbol de archivos jQuery pasa el nombre de archivo de vuelta como una cadena. La forma más fácil de capturar y manejar esta situación es mediante el uso de una función anónima. Si deseas pasar el nombre de archivo seleccionado para una función que hayas creado llamada openFile (), el código se verá asÃ:
Scripts conectores
El árbol de archivos jQuery viene con un puñado de scripts conectores de Serverside que se utilizan para leer el archivo de sistema en tu servidor y devolver la información al script del clientside por medio de AJAX. El script de conexión por defecto es jqueryFileTree.php. Puedes utilizar una scripts conector de otro idioma, estableciendo el script para la ubicación del script que deseas utilizar. Alternativamente, puedes construir un script conector personalizado para extender la funcionalidad del árbol de archivos jQuery y que asà satisfaga mejor tus necesidades.
Scripts conectores para los siguientes lenguajes se incluyen en la descarga:
- PHP by Cory S.N. LaViska
- ASP (VBS) by Chazzuka
- ASP.NET (C#) por Andrew Sweeny
- ColdFusion by Tjarko Rikkerink
- JSP por Joshua Gould
- Lasso por Marc Sabourdin
- Lasso por Jason Huck
- Perl por Oleg Burlaca
- Python/Django por Martin Skou
- Ruby porErik Lax
Scripts conectores personalizados
Puedes crear un script conector personalizado para extender la funcionalidad del árbol de archivos. La forma más sencilla de hacerlo es probablemente modificando uno de los scripts ofrecidos en la descarga. Si deseas empezar desde cero, tu script debe aceptar una variable POST (dir) y producir una lista sin clasificar en el siguiente formato:
-
<ul class="jqueryFileTree" style="display: none;">
-
<li class="directory collapsed"><a rel="/this/folder/" href="#">Folder Name</a></li>
-
(additional folders here)
-
<li class="file ext_txt"><a rel="/this/folder/filename.txt" href="#">filename.txt</a></li>
-
(additional files here)</ul>
Noten que la extensión de archivo correspondiente debe ser escrita como una clase del elemento li, prefijada con ext_.
Fuente: A Beautiful Site
Martes, 15 de Septiembre de 2009 a las 16.23
De lujo... seguro me sera muy util en algun proyecto_thanks (Micaela);
: )" downloading...
Lunes, 5 de Octubre de 2009 a las 21.20
Ho espero alguien me pueda ayudar, estoy utilizando los scripts de php (conectores) pero el problema es que al momento de visualizar la información no realiza de ningun tipo de identado en Internet Explorer 8 pero si lo hace en la versión 7
Alguien sabe porque ocurre esto?
En espera de su respuesta. Gracias.
Miércoles, 18 de Mayo de 2011 a las 02.44
entro al link de descarga pero no aparece nada :S me podrian enviar el link exacto???
Jueves, 30 de Junio de 2011 a las 17.52
Hola que tal muy interesante pero el link de descarga no funciona y realmente me interesa gracias!
Jueves, 15 de Septiembre de 2011 a las 07.41
He encontrado una versión de script y conectores en esta ruta "http://anatexis.net/websvn/log.php?repname=DWM&path=%2Fjs%2FjqueryFileTree.zip&rev=41&isdir="
No tengo puedo confirmar que sean correctos, estoy en fase de instalación y pruebas...
Martes, 14 de Mayo de 2013 a las 13.20
Como hacer para que el archivo sea descargado por el usuario??