Javascript jQuery文件树-在单击文件夹时检测_Javascript_Jquery_Html

Javascript jQuery文件树-在单击文件夹时检测

javascript jquery html

Javascript jQuery文件树-在单击文件夹时检测,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用以下示例将jQuery文件树添加到我的网站：我可以使用它来触发一个事件，当一个文件被点击时，正如演示所示，但我似乎不知道如何检测一个文件夹被选中。我希望能够在任何时候确定当前选择的目录现在，我已经查看了这里提出的问题并尝试了建议，但我的可怕功能从未被触发（我从未看到我设置的警报）：下面是我的index.html，它在开头包含jquery调用： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.

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

我可以使用它来触发一个事件，当一个文件被点击时，正如演示所示，但我似乎不知道如何检测一个文件夹被选中。我希望能够在任何时候确定当前选择的目录

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

下面是我的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>

请注意，我是如何按照另一个问题的建议设置函数（dire）部分的。我错过什么了吗

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

if（jQuery）（函数（$）{
$.extend（$.fn{
文件树：函数（o、h、dire）{
//默认值
如果（！o）var o={}；
如果（o.root==未定义）o.root='/'；
如果（o.script==undefined）o.script='jqueryFileTree.php'；
如果（o.folderEvent==未定义）o.folderEvent='单击'；
如果（o.expandSpeed==未定义）o.expandSpeed=500；
如果（o.collapseSpeed==未定义）o.collapseSpeed=500；
如果（o.expandEasing==未定义）o.expandEasing=null；
如果（o.collapseEasing==未定义）o.collapseEasing=null；
如果（o.multiFolder==未定义）o.multiFolder=true；
如果（o.loadMessage==undefined）o.loadMessage='Loading…'；
$（this）.each（function（）{
函数showTree（c，t）{
$（c）.addClass（'wait'）；
$（“.jqueryFileTree.start”）.remove（）；
$.post（o.script，{dir:t}，函数（数据）{
$（c）.find（'.start'）.html（''）；
$（c）.removeClass（'wait'）.append（数据）；
if（o.root==t）$（c）.find（'UL:hidden'）.show（）；else$（c）.find（'UL:hidden'）.slideDown（{duration:o.expandSpeed，easing:o.expandEasing}）；
bindTree（c）；
});
}
函数bindTree（t）{
$（t）.find（'LI A'）.bind（o.folderEvent，function（）{
if（$（this）.parent（）.hasClass（'directory'））{
if（$（this）.parent（）.hasClass（'collapsed'））{
dire（$（this.attr（'rel'））；
//扩展
如果（！o.multiFolder）{
$（this.parent（）.parent（）.find（'UL'）.slideUp（{duration:o.collapseep，easing:o.collapseeing}）；
$（this.parent（）.parent（）.find（'LI.directory'）.removeClass（'expanded'）.addClass（'collapsed'）；
}
$（this）.parent（）.find（'UL'）.remove（）；//清除
showTree（$（this.parent（）），escape（$（this.attr（'rel'））.match（/.*\/）；
$（this.parent（）.removeClass（'collapsed'）.addClass（'expanded'）；
}否则{
//崩溃
$（this.parent（）.find（'UL'）.slideUp（{duration:o.collapseSpeed，easing:o.collapseEasing}）；
$（this.parent（）.removeClass（'expanded'）.addClass（'collapsed'）；
}
}否则{
h（$（this.attr（'rel'））；
}
返回false；
});
//防止触发#on非点击事件
if（o.folderEvent.toLowerCase！=“click'）$（t）.find（'LI A'）.bind（'click'，function（）{return false；}）；
}
//加载消息
$（this.html（“”+o.loadMessage+”）；
//获取初始文件列表
showTree（$（this），escape（o.root））；
});
}
});
})（jQuery）；

我和你有同样的问题。我以与另一个StackOverflow问题相同的方式编辑代码，但它不起作用。但是上面的代码工作得非常好

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

希望能有帮助

我和你有同样的问题。我以与另一个StackOverflow问题相同的方式编辑代码，但它不起作用。但是上面的代码工作得非常好

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

希望有帮助

是brokenTry我更新了我的问题是brokenTry我更新了我的问题

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