Question

我正在尝试使用下面显示的示例将jQuery文件树添加到我的网站：

https://www.abeautifulsite.net/jquery-file-tree

我可以使用它没有问题，当演示显示单击文件时触发事件但我似乎无法弄清楚如何检测何时选择文件夹。我希望能够确定当前选择的目录。

现在我已经查看了这里提出的问题，并尝试了所建议的内容，但我的可怕功能从未被解雇（我从未看到我设置的警报）：

Jquery File Tree - how to return folder name on folder click

这是我的index.html，其中包括开头的jquery调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>jQuery File Tree Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">
        BODY,
        HTML {
            padding: 0px;
            margin: 0px;
        }
        BODY {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            background: #EEE;
            padding: 15px;
        }

        H1 {
            font-family: Georgia, serif;
            font-size: 20px;
            font-weight: normal;
        }

        H2 {
            font-family: Georgia, serif;
            font-size: 16px;
            font-weight: normal;
            margin: 0px 0px 10px 0px;
        }

        .example {
            float: left;
            margin: 15px;
        }

        .demo {
            width: 200px;
            height: 400px;
            border-top: solid 1px #BBB;
            border-left: solid 1px #BBB;
            border-bottom: solid 1px #FFF;
            border-right: solid 1px #FFF;
            background: #FFF;
            overflow: scroll;
            padding: 5px;
        }

    </style>

    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.easing.js" type="text/javascript"></script>
    <script src="jqueryFileTree.js" type="text/javascript"></script>
    <link href="jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />

    <script type="text/javascript">



$(document).ready( function() {
$('#fileTreeDemo_1').fileTree({ root: 'C:/wamp/www/uploads/', script: 'connectors/jqueryFileTree.php' }, function(file) {
    // do something when a file is clicked
    alert(file);
}, function(dire){
    // do something when a dir is clicked
    alert(dire);
});
});

    </script>

</head>

<body>


    <div class="example">
        <h2>Files</h2>
        <div id="fileTreeDemo_1" class="demo"></div>
    </div>



</body>

这是

的主要功能

$(document).ready( function() {
$('#fileTreeDemo_1').fileTree({ root: 'C:/wamp/www/uploads/', script: 'connectors/jqueryFileTree.php' }, function(file) {
// do something when a file is clicked
alert(file);
}, function(dire){
// do something when a dir is clicked
alert(dire);
});
});

注意我如何设置功能（可怕）部分作为建议的其他SO问题。我错过了什么吗？

js文件：

if(jQuery) (function($){

$.extend($.fn, {
    fileTree: function(o, h, dire) {
        // 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') ) {
                            dire($(this).attr('rel'));
                            // 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);

Answer 1

我和你有同样的问题。我以与其他StackOverflow问题相同的方式编辑代码，但它不起作用。但上面的代码完全正常。

我所要做的就是清除缓存并重建我的应用程序，以便更新旧的jqueryFileTree.js。

希望有所帮助

jQuery文件树 - 检测单击文件夹的时间

1 个答案: