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
Iniciar sesión