Micaela 14 de septiembre de 2009 a las 09.03
   Imprimir artículo
elWebmaster.com

jQuery: Crea un menú de archivos y directorios para tu web


jquery1El á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

Version 1.01

Creando el árbol de archivos

La forma sencilla es crear el árbol utilizando el siguiente código:

  1. $(document).ready( function() {
  2. $('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
  3. alert(file);
  4. });
  5. });

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í:

  1. $(document).ready( function() {
  2. $('#container_id').fileTree({
  3. root: '/some/folder/',
  4. script: 'jqueryFileTree.asp',
  5. expandSpeed: 1000,
  6. collapseSpeed: 1000,
  7. multiFolder: false
  8. }, function(file) {
  9. alert(file);
  10. });
  11. });

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í:

  1. function openFile(file) {
  2. // do something with file
  3. }
  4.  
  5. $(document).ready( function() {
  6. $('#container_id').fileTree({ [options] }, function(file) {
  7. openFile(file);
  8. });
  9. });

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:

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:

  1. <ul class="jqueryFileTree" style="display: none;">
  2.     <li class="directory collapsed"><a rel="/this/folder/" href="#">Folder Name</a></li>
  3. (additional folders here)
  4.     <li class="file ext_txt"><a rel="/this/folder/filename.txt" href="#">filename.txt</a></li>
  5. (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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. zo_Ombi dice:

    De lujo… seguro me sera muy util en algun proyecto_thanks (Micaela);
    : )” downloading…

  2. rafka dice:

    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.

  3. Carlos Medina dice:

    entro al link de descarga pero no aparece nada :S me podrian enviar el link exacto???

  4. Rafa dice:

    Hola que tal muy interesante pero el link de descarga no funciona y realmente me interesa gracias!

  5. Javier dice:

    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…

  6. Sebastian Soto dice:

    Como hacer para que el archivo sea descargado por el usuario??

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder