jquery - 抽象 jQuery プラグインの拡張

Question

ajax 経由でサーバーにクエリを実行し、ポップアップを表示する jQuery プラグインを作成しました。次に、別のデータを返して表示する別のページに別のデータが必要でした。私が実装した方法では、プラグインはどのページにあったかを示すデータをサーバーに送信し、サーバーはデータを取得してデータの種類を送り返し、クライアントは特定の種類のデータに応じてそれを表示します。

私のアプローチには明らかに多くの要望があります。代わりに、プラグインの抽象的なバージョンを作成し、それを特定のアプリケーションごとに拡張して、正しく表示する (つまり、switch ステートメントを削除する) ことは可能ですか? また、ポップアップ (つまり #screenshot) で ID を使用しないようにするにはどうすればよいですか? ありがとう

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

score 1 · Accepted Answer

役立つかもしれないいくつかのアイデア。まず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/

ポジショニングでコードを乱雑にせず、概念に集中できるようにデモをシンプルに保ちました

jquery - 抽象 jQuery プラグインの拡張

1 に答える 1

Related

Reference