jquery - 如何向此 jquery 脚本添加图像预览？

Question

我尝试了几种不同的方法来将图像悬停预览选项添加到我使用的文件管理器/文件上传脚本中。

我将在下面发布我的脚本。如有任何帮助，我们将不胜感激。

$(function($){
var optionDefaults = {
    path            : '',
    upload          : false,
    readonly        : false,
    fixedPath       : false,

    baseClass       : 'fmBase',
    folderClass     : 'fmFolder',
    trashClass      : 'fmTrash',
    backClass       : 'fmBack',
    loadingClass    : 'fmLoading',

    highlightClass  : 'ui-state-highlight',
    hoverClass      : 'ui-state-active'
};

$.fn.fileManager = function(settings, pluploadOptions) {
    var mbOptions = $.extend({}, optionDefaults, settings);
    if (!mbOptions.ajaxPath) {
        alert('ajaxPath not specified'); return;
    }
    if (mbOptions.fixedPath) mbOptions.path = mbOptions.fixedPath;

    pluploadOptions = $.extend({url:mbOptions.ajaxPath,runtimes:'html5,html4'}, pluploadOptions);

    var query = $.extend({},{path:mbOptions.path},mbOptions.get);
    this.each(function () { // swap with getJSON so not duplicating ajax
        var $sel = $(this);
        $.getJSON(mbOptions.ajaxPath, query, function(data, status) {
            $sel.data('result',data);
            $sel.data('options',mbOptions);
            if (status != "success") {
                var msg = "Sorry but there was an error: "+status;
            }
            // process response
            $sel.empty();

            if (!mbOptions.readonly) {
                $sel.append('<div class="path"><b>URL Path:</b> '+data.rootPath+data.path+'</div>');
                if (data.path && !mbOptions.fixedPath) DrawItem($sel,{path:'..',title:'...',type:3});
                DrawItem($sel,{path:'',title:'',type:2});
            }
            if ($(data.files).length == 0) {
              $sel.append('<div style="font-size:12px; margin: 35px 0 0 15px;">No files in this folder</div>');
            }
            $(data.files).each(function () {
                DrawItem($sel,this);
            });
            $sel.append('<div style="clear:both"></div>');
            if (!mbOptions.readonly)
                $sel.append($('<div style="margin:5px">New Folder</div>').button().bind('click',NewFolder));
            if (mbOptions.upload) {
                var ul = $('<div></div>').hide();
                $sel.append($('<div style="margin:5px">Upload Files</div>').button().bind('click',{container:ul},UploadFiles));
                $sel.append(ul);
            }

            // end processing

            $('.'+mbOptions.baseClass,$sel).disableSelection();//bind('selectstart',function () { return false; });
            $('.'+mbOptions.folderClass,$sel).bind('dblclick',ItemDblClick);
            $('.'+mbOptions.backClass,$sel).bind('dblclick',ItemDblClickBack);
        });

        function UploadFiles(event) {
            $(event.data.container).toggle();
            if (plupload && pluploadOptions) {
                if (!$(event.data.container).pluploadQueue) {
                    $(event.data.container).html('Must install Plupload jquery plugin.'); return;
                }
                var opts = pluploadOptions;
                opts.url = opts.url+ (opts.url.indexOf('?') < 0 ? '?' : '&') +'path='+$sel.data('result').path;
                $(event.data.container).pluploadQueue(opts);
                $(event.data.container).pluploadQueue().bind('FileUploaded',function (uploader,file,response) {
                    if (uploader.total.queued == 0) {
                        RefreshView($sel);
                    }
                });
            } else {
                $(event.data.container).html('Must install Plupload.');
            }
        }
        function NewFolder() {
            var path = prompt('Enter Folder Name:');
            if (!path) return;
            if ($sel.data('result').path) path = $sel.data('result').path + '/' + path;
            ReloadFolder($sel, path);
        }
    });


    function FileDropped(event,ui) {
        var from = $(ui.draggable);
        var to = $(this);

        if ($(this).hasClass(mbOptions.trashClass)) {
            if (confirm('Delete "'+from.data('item').title+'"?')) {
                ajaxData = {path:mbOptions.path,'delete':from.data('item').path};
                $.ajax({url:mbOptions.ajaxPath,data:ajaxData,dataType:'script',complete:function() {
                    RefreshView(from.data('item').target);
                }});
            }
        } else {
            return Rename(from.data('item').target,from.data('item').path,to.data('item').path+'/'+from.data('item').path);
        }
    };
    function Rename(view,from,to) {
        ajaxData = {path:mbOptions.path,mFrom:from,mTo:to};
        $.ajax({url:mbOptions.ajaxPath,data:ajaxData,dataType:'script',complete:function() {
            RefreshView(view);
        }});
    }
    function ItemDblClick() {
        var item = $(this).data('item');
        if (item.type != ICONTYPE_FOLDER) return;
        var path = item.path;
        if (item.target.data('result').path) path = item.target.data('result').path + '/' + path;
        ReloadFolder(item.target,path);
    }
    function ItemDblClickBack() {
        var item = $(this).data('item');
        if (item.type != ICONTYPE_BACK) return;
        var path = item.path;
        if (item.target.data('result').path) path = item.target.data('result').path + '/' + path;
        ReloadFolder(item.target,path);
    }
    function RefreshView(target) {
        ReloadFolder(target,target.data('result').path);
    }
    function ReloadFolder(target,path) {
        target.fileManager($.extend({},mbOptions,{path:path}),pluploadOptions);
    };

    var ICONTYPE_FILE = 0;
    var ICONTYPE_FOLDER = 1;
    var ICONTYPE_TRASH = 2;
    var ICONTYPE_BACK = 3;
    function DrawItem(target, item) {
        if (item.type == ICONTYPE_FOLDER && mbOptions.fixedPath) return;

        item.target = $(target);
        item.fullPath = item.target.data('result').rootPath + item.target.data('result').path + '/' + item.path;
        var icon = $('<div title="'+item.title+'"></div>');
        icon.data('item',item);
        icon.addClass(mbOptions.baseClass);

        // set classes
        if (item.type == ICONTYPE_FOLDER)
            icon.addClass(mbOptions.folderClass);
        else if (item.type == ICONTYPE_TRASH)
            icon.addClass(mbOptions.trashClass);
        else if (item.type == ICONTYPE_BACK)
            icon.addClass(mbOptions.backClass);

        // set draggables
        if (!mbOptions.readonly) {
            if (item.type == ICONTYPE_FOLDER || item.type == ICONTYPE_TRASH)
                icon.droppable({tolerance:'intersect',accept:'.'+mbOptions.baseClass,drop:FileDropped,hoverClass:mbOptions.hoverClass,activeClass:mbOptions.highlightClass});
            if (item.type != ICONTYPE_TRASH && item.path != '..')
                icon.draggable({stack:'files',revert:true,zIndex:1000,opacity:0.5,scroll:false});
        }

        if (item.type == ICONTYPE_FILE && item.path.search(/.jpeg|.jpg|.png|.gif|.tif|.tiff/i) > -1) {
            icon.css('background-image','none');
            icon.append('<img style="width:100%;height:100%" src="'+item.fullPath+'">');
        }

        // events
        if (mbOptions.events) {
            $.each(mbOptions.events,function (index,value) {
                icon.bind(index, value);
            });
        }
        icon.data('result',target.data('result'));

        target.append(icon);
        if (!item.path) return;

        //if (mbOptions.readonly) return;

        var ext = item.path.match(/\.[^.\b]*$/i);
        if (ext) ext = ext[0];
        else ext = '';
        var basename = item.path.replace(ext,'');

        var renamebox = $('<input style="position:absolute;left:0px;bottom:0px;right:0px" type="text">')
            .bind('focus',function() { $(this).val(basename); })
            .bind('blur',function() { $(this).hide(); if (item.path == $(this).val()+ext) return; Rename(item.target,item.path,$(this).val()+ext); })
            .bind('keydown',function(event) { if (event.keyCode == '13' || event.keyCode == '27') $(this).blur(); })
            .hide()
            .appendTo(icon);
        var label = $('<div class="label">'+item.title+'</div>')
            .prependTo(icon)//.bind('dblclick',function() {return false;})
            .bind('click',function () {
                if (!mbOptions.readonly) {
                    renamebox.show().focus();
                    return false;
                }
            });
    }

    return $(this);
};

})(jQuery);

这是图像预览脚本:

this.imagePreview = function(){ 
/* CONFIG */

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
    this.t = this.title;
    this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    this.title = this.t;    
    $("#preview").remove();
}); 
$("a.preview").mousemove(function(e){
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});         
};// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

我遇到的问题是我必须将预览部分写入文件管理器部分。预览无法作为单独的脚本运行，因为文件管理器脚本使用 json/ajax 即时写入所有内容。仅供引用，预览脚本在单独使用时在我的测试页面中运行良好。希望这能澄清我的问题。

Answer 1

我找到了我的问题。研究jquery了解到hover是一个方便mouseenter和mouseleave的功能。因此，不要尝试绑定(bind)悬停，而是绑定(bind) mouseenter 和 mouseleave 事件。

下面是更正前后的代码，以便您可以看到我的解决方案。

之前

if (item.type == ICONTYPE_FILE && item.path.search(/.jpeg|.jpg|.png|.gif|.tif|.tiff/i) > -1) {
        icon.css('background-image','none');
        icon.append('<img style="width:100%;height:100%" src="'+item.fullPath+'">');
    }

之后

if (item.type == ICONTYPE_FILE && item.path.search(/.jpeg|.jpg|.png|.gif|.tif|.tiff/i) > -1) {
            xOffset = 10;
            yOffset = 30; // these 2 variable determine popup's distance from the cursor
            icon.css('background-image','none');
            icon.append($('<img style="width:100%;height:100%" src="'+item.fullPath+'">').bind({
                mouseenter: function(e) {
                // Hover event handler
                $("body").append("<p id='preview'><img src='"+item.fullPath+"' alt='Image preview' /></p>");                                
                $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");
                },
                mouseleave: function(e) {
                // Hover event handler
                $("#preview").remove();
                }
            }));
        }

附注:您需要将以下 css 添加到您的 css 文件之一或您使用的页面中以使其正常工作。

需要 CSS

#preview{
position:absolute;
border:1px solid #ccc;
background:#e6e6e6;
padding:5px;
display:none;
color:#fff;
}