Wie konvertiert man diesen jquery Code in ein jquery Plugin?

Question

Neuling hier ...

Ich habe diesen erstaunlichen Popup-Code, den ich hier fand. Ich benutze es in meinen Projekten gut. Was ich frage ist, kann jemand mir helfen, es zu einem plugin -ish-Code zu konvertieren, damit ich gewünschte divs anvisieren und es leicht auf mehr als einem Element verwenden kann.

Code:

$(document).ready(function() { 
    var offsetY = window.pageYOffset, 
    $body = $('body'), 
    $win = $(window), 
    $close = $('.mobile-filters-close'), 
    $open = $('.filters-toggle'), 
    $holder = $('.mobile-filters-wrapper'), 
    $stuff = $('.mobile-filters-wrapper .filters'); 

    // Close with 'esc' key 
    $(document).keyup(function (e) { 
     if (e.keyCode == 27) $close.trigger('click'); 
    }); 

    $open.click(function() { 
     offsetY = window.pageYOffset; 
     // Block scrolling 
     $body.css({ 
     'position': 'fixed', 
     'color': '#FFFF00', 
     'backgroundColor': '#00D', 
     'top': -offsetY + 'px' 
    }); 

    // Show popup 
    $holder.css('display', 'block'); 
    }); 

    $close.click(function() { 
     // Allow scrolling again 
     $body.css({ 
     'position': 'static', 
     'color': '', 
     'backgroundColor': '' 
    }); 

    /** 
    * Remove the following scrollTop()'s if you want. 
    * just a UI tweak that the user would expect. 
    **/ 
    // Make the page stay at the position it was at before the overlay 
    $win.scrollTop(offsetY); 
    // Reset the overlay scroll position to the top 
    $stuff.scrollTop(0); 
    // Hide popup 
    $holder.css('display', 'none'); 
    }); 
}); 

Und das ist, was ich suche:

$('.popup').CoolName({ 
    // options 
    $close = $('.mobile-filters-close'), 
    $open = $('.filters-toggle'), 
    $holder = $('.mobile-filters-wrapper'), 
    $stuff = $('.mobile-filters-wrapper .filters'); 
}); 

Vielen Dank für Hilfe :)

Answer 1

Gereinigt Dinge für Sie auf ein bisschen:

// Plugin function 
function coolName(triggers) { 
    $(document).ready(function() { 
     var offsetY = window.pageYOffset; 

     // Close with 'esc' key 
     $(document).keyup(function (e) { 
      if (e.keyCode == 27) triggers.close.trigger('click'); 
     }); 

     triggers.body.click(function() { 
      offsetY = window.pageYOffset; 
      // Block scrolling 
      triggers.body.css({ 
       'position': 'fixed', 
       'color': '#FFFF00', 
       'backgroundColor': '#00D', 
       'top': -offsetY + 'px' 
      }) 
     }); 

     // Show popup 
     triggers.holder.show(); 

     triggers.close.click(function() { 
      // Allow scrolling again 
      triggers.body.css({ 
       'position': 'static', 
       'color': '', 
       'backgroundColor': '' 
      }) 
     }); 

     /** 
     * Remove the following scrollTop()'s if you want. 
     * just a UI tweak that the user would expect. 
     **/ 
     // Make the page stay at the position it was at before the overlay 
     triggers.win.scrollTop(offsetY); 
     // Reset the overlay scroll position to the top 
     triggers.stuff.scrollTop(0); 
     // Hide popup 
     triggers.holder.hide() 
    }); 
} 

// Implementation 
coolName({ 
    close: $('.mobile-filters-close'), 
    open: $('.filters-toggle'), 
    holder: $('.mobile-filters-wrapper'), 
    stuff: $('.mobile-filters-wrapper .filters') 
}) 

Hinweis tha t Beim Erstellen eines Plugins besteht immer die Möglichkeit, dass Variablennamen, Funktionsnamen und HTML-Elementnamen mit dem Code der anderen Person unterbrochen werden. Ich würde alle Ihre Variablen/Funktionen mit "coolName_" voranstellen, um dies zu verhindern, wenn das sinnvoll ist.