Si interesa crear un sistema de árbol parejo a un tramo
de directorios y subdirectorios es fácil de la siguiente manera.
Objetivo:
 |
Javascripts necesarios:
<script src="/.../jquery.js”>
</script>
<script src="/.../jquery.easing.js" ></script>
<script src="/.../jqueryFileTree.js>
</script>
<link href="/.../jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
- fileTreeDemo.php
|
El resto del código:
<script type="text/javascript"> $(document).ready( function() { $('#fileTreeDemo_2').fileTree({ root: 'Directorio/de/datos/', script: '/.../jqueryFileTree.php', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) {llama2(file);});}); function llama2(cosa){window.open('Archivo.php?dibu='+cosa,'_self');} </script> </head><body> <div class="example"><div id="fileTreeDemo_2"></div></div> </body></html>
Análisis de las funciones/códigos: jquery.js → Demasiado coñazo para entenderlo. Se baja de internet y punto. /* * jQuery 1.2.1 - New Wave Javascript * * Copyright (c) 2007 John Resig (jquery.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * $Date: 2007-09-16 23:42:06 -0400 (Sun, 16 Sep 2007) $ * $Rev: 3353 $ */ jquery.easing.js → /* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built In easIng capabilities added In jQuery 1.1 * to offer multiple easIng options * * Copyright (c) 2007 George Smith * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ jqueryFileTree.js → // jQuery File Tree Plugin // // Version 1.01 // // Cory S.N. LaViska // A Beautiful Site (http://abeautifulsite.net/) // 24 March 2008 // // Visit http://abeautifulsite.net/notebook.php?article=58 for more information DESDE ESTE SE LLAMARA A: jqueryFileTree.php jqueryFileTree.css → UL.jqueryFileTree { font-family: Verdana, sans-serif; line-height: 18px; padding: 0px; margin: 0px; } UL.jqueryFileTree LI { list-style: none; padding: 0px; padding-left: 20px; margin: 0px; white-space: nowrap; } UL.jqueryFileTree A { color: #333; text-decoration: none; display: block; padding: 0px 2px; } UL.jqueryFileTree A:hover { background: #BDF; } /* Core Styles */ .jqueryFileTree LI.directory { background: url(images/directory.png) left top no-repeat; } .jqueryFileTree LI.expanded { background: url(images/folder_open.png) left top no-repeat; } .jqueryFileTree LI.file { background: url(images/file.png) left top no-repeat; } .jqueryFileTree LI.wait { background: url(images/spinner.gif) left top no-repeat; } /* File Extensions*/ .jqueryFileTree LI.ext_3gp { background: url(images/film.png) left top no-repeat; } .jqueryFileTree LI.ext_afp { background: url(images/code.png) left top no-repeat; } .jqueryFileTree LI.ext_afpa { background: url(images/code.png) left top no-repeat; } […] jqueryFileTree.php <?php $_POST['dir'] = urldecode($_POST['dir']); if ($_POST['dir']<>"//"){ $root = isset($root) ? $root : ""; if (is_dir("/EL/DIRECTORIO/DE/PARTIDA/".$root.$_POST['dir'])){$root="/EL/DIRECTORIO/DE/PARTIDA/".$root;} if( file_exists($root . $_POST['dir']) ) { $files = scandir($root . $_POST['dir']); natcasesort($files); if( count($files) > 2 ) { /* The 2 accounts for . and .. */ echo "<ul class=\"jqueryFileTree\" style=\"display: none;\">"; // All dirs foreach( $files as $file ) { if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && is_dir($root . $_POST['dir'] . $file) && ( substr($file,-1,1)<>"-" ) ) { echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "/\">" . htmlentities(utf8_decode($file)) . "</a></li>"; } } // All files foreach( $files as $file ) { if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file) && ( substr($file,-5,1)<>"-" ) ) { $ext = preg_replace('/^.*\./', '', $file); if (strlen($ext) > 4) {$ext="";} echo "<li class=\"file ext_$ext\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities(utf8_decode($file)) . "</a></li>"; } } echo "</ul>"; } } }//nodir ?>
Parece lioso pero el resultado de conjugar jQuery
con jqueryFileTree es asombroso.
No hay comentarios:
Publicar un comentario