Comment créer une fonctionnalité similaire à Windows Explorer?

Question

Je construis une application web qui a besoin d'une fonctionnalité similaire à Windows Explorer. J'ai implémenté l'arborescence de fichiers jQuery mais celle-ci fonctionne uniquement pour la navigation à gauche. Des idées sur lesquelles je peux travailler ou des solutions prêtes à l'emploi?

Voici le code PHP qui construit les balises ul et li:

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)) { 
      echo "<li class=\"directory collapsed\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "/\">" . htmlentities($file) . "</a></li>"; 
     } 
    } 

    // All files 
    foreach($files as $file) { 
     if(file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file)) { 
      $ext = preg_replace('/^.*\./', '', $file); 
      echo "<li class=\"file ext_$ext\"><a href=\"" . htmlentities($_POST['dir'] . $file) . "\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>"; 
     } 
    } 
    echo "</ul>";  
} 

}

Ce qui suit est la bibliothèque jquery

if(jQuery) (function($){ 

$.extend($.fn, { 
    fileTree: function(o, h) { 
     // Defaults 
     if(!o) var o = {}; 
     if(o.root == undefined) o.root = '/'; 
     if(o.script == undefined) o.script = 'jqueryFileTree.php'; 
     if(o.folderEvent == undefined) o.folderEvent = 'click'; 
     if(o.expandSpeed == undefined) o.expandSpeed= 500; 
     if(o.collapseSpeed == undefined) o.collapseSpeed= 500; 
     if(o.expandEasing == undefined) o.expandEasing = null; 
     if(o.collapseEasing == undefined) o.collapseEasing = null; 
     if(o.multiFolder == undefined) o.multiFolder = true; 
     if(o.loadMessage == undefined) o.loadMessage = 'Loading...'; 

     $(this).each(function() { 

      function showTree(c, t) { 
       $(c).addClass('wait'); 
       $(".jqueryFileTree.start").remove(); 
       $.post(o.script, { dir: t }, function(data) { 
        $(c).find('.start').html(''); 
        $(c).removeClass('wait').append(data); 
        if(o.root == t) $(c).find('UL:hidden').show(); else $(c).find('UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing }); 
        bindTree(c); 
       }); 
      } 

      function bindTree(t) { 
       $(t).find('LI A').bind(o.folderEvent, function() { 
        if($(this).parent().hasClass('directory')) { 
         if($(this).parent().hasClass('collapsed')) { 
          // Expand 
          if(!o.multiFolder) { 
           $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing }); 
           $(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed'); 
          } 
          $(this).parent().find('UL').remove(); // cleanup 
          showTree($(this).parent(), escape($(this).attr('rel').match(/.*\//))); 
          $(this).parent().removeClass('collapsed').addClass('expanded'); 
         } else { 
          // Collapse 
          $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing }); 
          $(this).parent().removeClass('expanded').addClass('collapsed'); 
         } 
        } else { 
         h($(this).attr('rel')); 
        } 
        return false; 
       }); 
       // Prevent A from triggering the # on non-click events 
       if(o.folderEvent.toLowerCase != 'click') $(t).find('LI A').bind('click', function() { return false; }); 
      } 
      // Loading message 
      $(this).html('<ul class="jqueryFileTree start"><li class="wait">' + o.loadMessage + '<li></ul>'); 
      // Get the initial file list 
      showTree($(this), escape(o.root)); 

     }); 
    } 
}); 

}) (jQuery);

ci-après le HTML

<script> 

$ (document) .ready (function() { $ ('container_id.') FileTree ({racine:. '/', Le script: « jqueryFileTree.php », multiFolder: false}, la fonction (fichier) {// alerte (fichier); openFile (fichier); });

function openFile(file){ 

alert(file); 
    } 

});

Answer 1

Si vous utilisez File Tree jQuery, il semble que vous pouvez simplement passer un rappel qui charge le fichier sélectionné dans le côté droit.