0

我创建了一个 jQuery 插件，它通过 ajax 查询服务器并显示一个弹出窗口。然后我想要另一个页面上的另一个返回一些不同的数据并显示它。我实现它的方式是，插件将指示它所在页面的数据发送到服务器，服务器将获取数据并发送回数据类型，客户端将根据给定的数据类型显示它。

我的方法显然有很多不足之处。相反，是否可以制作插件的抽象版本，然后将其扩展到每个特定应用程序以便正确显示它（即摆脱 switch 语句）？另外，我怎样才能避免在弹出窗口上使用一个 id（即#screenshot），以便每个都可以单独设置样式？谢谢

ayb={};
$("a.screenshot").screenshotPreview();

function contact(data)
{
    return '<dl><dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
    +'<dt>Account:</dt><dd>'+data.account_name+'</dd>'
    +'<dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
    +((data.title)?'<dt>Title:</dt><dd>'+data.title+'</dd>':'')
    +'<dt>User Name:</dt><dd>'+data.username+'</dd>'
    +'<dt>Password:</dt><dd>'+data.password+'</dd>'
    +'<dt>Communication Method:</dt><dd>'+data.communication_method+'</dd>'
    +((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
    +((data.account_phone)?'<dt>Account Phone:</dt><dd>'+display_phone(data.account_phone)+'</dd>':'')
    +((data.phone)?'<dt>Direct Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
    +((data.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+display_phone(data.mobile_phone)+'</dd>':'')
    +((data.account_fax)?'<dt>Account Fax:</dt><dd>'+display_phone(data.account_fax)+'</dd>':'')
    +((data.fax)?'<dt>Direct Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
    +((data.address || data.location)?'<dt>Address:</dt><dd>'+data.address+((data.address && data.location)?'<br>':'')+data.location+'</dd>':'')
    +((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
    +'</dl>';
}
function account(data)
{
    return '<dl><dt>Name:</dt><dd>'+data.name+'</dd>'
    +((data.phone)?'<dt>Account Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
    +((data.fax)?'<dt>Account Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
    +((data.address || data.location)?'<dt>Address:</dt><dd>'+data.address+((data.address && data.location)?'<br>':'')+data.location+'</dd>':'')
    +((data.vertical_markets)?'<dt>Primary Market:</dt><dd>'+data.vertical_markets+'</dd>':'')
    +((data.priority)?'<dt>Priority:</dt><dd>'+data.priority+'</dd>':'')
    +'</dl>';
}
function user(data)
{
    return '<dl><dt>Name:</dt><dd>'+data.firstname+' '+data.lastname+'</dd>'
    +'<dt>User Name:</dt><dd>'+data.username+'</dd>'
    +((data.phone)?'<dt>Direct Phone:</dt><dd>'+display_phone(data.phone)+'</dd>':'')
    +((data.mobile_phone)?'<dt>Mobile Phone:</dt><dd>'+display_phone(data.mobile_phone)+'</dd>':'')
    +((data.fax)?'<dt>Direct Fax:</dt><dd>'+display_phone(data.fax)+'</dd>':'')
    +((data.email)?'<dt>Email:</dt><dd>'+data.email+'</dd>':'')
    +'</dl>';
}
function getUrlVars(href)
{
    //Returns object based on variables in url.  Used to send data to GET
    var vars = {}, hash, hashes = href.slice(href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars[hash[0]] = hash[1];
    }
    return vars;
}


(function( $ ){
    $.fn.screenshotPreview = function() {
        //Apply to links to get a preview of the link

        //Config - Set popup's distance from the cursor
        ayb.screenshot={};
        ayb.screenshot.xOffset = 20;
        ayb.screenshot.yOffset = 10;
        ayb.screenshot.showing=false;

        this.hover(function(e)
        {
            if(!ayb.screenshot.showing){
                ayb.screenshot.title = this.title;this.title = "";//Prevent title from being displayed,and save for later to put back    
                var url=getUrlVars(this.href);
                ayb.screenshot.timeoutID=window.setTimeout(function() {
                    ayb.screenshot.showing = true;
                    url.task="getPopup";   //specify task
                    ayb.screenshot.ajax=$.ajax({
                        url:    'index.php',
                        data: url,
                        success: function(data)
                        {
                            //Determine how to display returned data
                            switch (data.type)
                            {
                                case 'contact':var string=contact(data);break;
                                case 'account':var string=account(data);break;
                                case 'user':var string=user(data);break;
                                case 'project':var string=project(data);break;
                                default:var string='Error';
                            }
                            $("body").append('<div id="screenshot">'+((ayb.screenshot.title != '')?'<h3>'+ayb.screenshot.title+'</h3>':null)+string+"</div>");                                 
                            $("#screenshot")
                            .css("top",(e.pageY - ayb.screenshot.yOffset) + "px")
                            .css("left",(e.pageX + ayb.screenshot.xOffset) + "px")
                            .fadeIn("fast");                    
                        },
                    dataType: 'json'
                    });
                },250); //Wait 1/4 of a second before requesting data from server
            }
        },
        function()
        {
            //When not hover
            if (typeof ayb.screenshot.ajax == 'object') {ayb.screenshot.ajax.abort();}
            window.clearTimeout(ayb.screenshot.timeoutID);
            this.title = ayb.screenshot.title;    
            $("#screenshot").remove();
            ayb.screenshot.showing = false;
        });    
        this.mousemove(function(e)
        {
            $("#screenshot").css("top",(e.pageY - ayb.screenshot.yOffset) + "px").css("left",(e.pageX + ayb.screenshot.xOffset) + "px");
        });
    };
})( jQuery );
4

1 回答 1

1

几个可能有帮助的想法。首先是data-在标记中使用属性：

<a href="#" class="screenshot" data-type="user">User Link</a>

接下来是创建一个更通用的模板方法。使用类型可以从 html 中获取，data-type并通过添加相同类型的类（或与类型相关的一些其他协议），您可以为不同的用例使用不同的 css

演示 JS：

(function ($) {

    var shotTemplate = function (data, type) {
        this.shot = {
            start: '<div id="screenshot" class="' + type + '">',
            end: '</div>},'
        };
        this.user = function () { 
            /* not suggesting "data.type" protocol, was just simple for my demo*/
            return '<div class="user_class">' + data.user + '</div>';
        };
        this.contact = function () {
            return '<div class="contact_class">' + data.contact + '</div>';
        };
        this.account= function () {
            return '<div class="account_class">' + data.account + '</div>';
        };

        return this.shot.start + this[type]() + this.shot.end;

    };  



    $.fn.screenshotPreview = function () {
        return this.each(function () {
            var $el = $(this);
            /* isolate screenshot to this instance*/
            var $screenshot;
            $el.hover(function () {
                $.post(url,data,function( response){
                        $screenshot = $(shotTemplate(response, $el.data('type')));
                        $('body').append($screenshot);
                });
            }, function () {
                $screenshot.remove();
            })

        });

    };
})(jQuery);

CSS：

#screenshot.user{background:navy;color:white}
#screenshot.contact{background:#444;color:white}

演示：http: //jsfiddle.net/wceDc/

我保持演示简单，以允许专注于概念而不是混乱的代码与定位

于 2013-03-16T19:53:21.383 回答