このjqueryコードをjqueryプラグインに変換するには？

Question

初心者ここ...

私はこの素晴らしいポップアップコードをここで見つけました。私は自分のプロジェクトでそれを使っています。私が求めているのは、誰かがプラグインのコードに変換して、必要なdivをターゲットにして、複数の要素で簡単に使用できるように助けることができるかどうかです。

コード：

$(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'); 
    }); 
}); 

そして、これは私が探しているものです：助けを

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

感謝:)あなたのため

Answer 1

クリーン物事ビット：

// 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') 
}) 

メモthaプラグインを作成するときには、変数名、関数名、およびHTML要素名が他の人のコードと干渉する可能性が常にあります。あなたの変数や関数の前に "coolName_"をつけておくと、これを防ぐことができます。