如何创建类似Windows资源管理器的功能?

时间:2010-10-04 18:36:56

标签: javascript jquery

我正在构建一个需要类似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库

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

以下是HTML

<script>

$(document).ready(function(){     $('。container_id')。fileTree({root:'/',script:'jqueryFileTree.php',multiFolder:false},function(file){      //警报(文件);     中openFile(文件);     });

function openFile(file){

alert(file);
    }

});

1 个答案:

答案 0 :(得分:1)

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