Javascript 如何创建类似windows资源管理器的功能？

我正在构建一个需要类似windows资源管理器功能的web应用程序。我已经实现了jQuery文件树，但那个只适用于左导航。有什么我可以研究的想法或现成的解决方案吗

以下是构建ul和li标记的PHP代码：

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>";    
}

}))

---

如果使用jQuery文件树，看起来您可以传递一个在右侧加载选定文件的回调。

如果使用jQuery文件树，看起来您可以传递一个在右侧加载选定文件的回调。

您需要它做什么？浏览服务器或客户端上的文件？在后一种情况下，它不是很简单。从服务器浏览文件。差不多。如果您单击左侧的文件夹，它应该位于右侧，就像在windows资源管理器中一样。您需要它做什么？浏览服务器或客户端上的文件？在后一种情况下，它不是很简单。从服务器浏览文件。差不多。如果单击左侧的文件夹，它应该位于右侧，就像在windows资源管理器中一样。我想不出在回调函数中使用的逻辑。难道没有任何web应用程序使用“windows资源管理器”模式吗？@Jaspero：老实说，如果有很多这样的应用程序，我会感到惊讶。很少有Web应用程序想要模仿分层文件系统，更不用说Windows资源管理器的精确界面，而不是更适合应用程序用途的东西。我想不出回调函数中使用的逻辑。难道没有任何web应用程序使用“windows资源管理器”模式吗？@Jaspero：老实说，如果有很多这样的应用程序，我会感到惊讶。很少有Web应用程序想要模仿分层文件系统，更不用说Windows Explorer的精确界面，而不是更适合应用程序用途的东西。

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) );

        });
    }
});

<script>

function openFile(file){

alert(file);
    }