帮助将 jQuery 脚本变成插件

Easy All

由于我最近一直在学习 jQuery，我决定编写自己的模态窗口来在单击视频缩略图时播放视频。一切都很好，但我只是想知道如何将它变成一个插件，这样我就可以在具有不同参数的不同页面上使用它等。我阅读了文档和一些教程，但我似乎无法让它发挥作用。我的基本代码如下：

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){

    // Add our click OPEN event
    $j("a.video_link").click(function (e) {
        e.preventDefault();
        // Add our overlay div
        $j('body').append('<div id="overlay" />');
        // Fade in overlay
        $j('#overlay').css({"display":"block","opacity":"0"}).animate({"opacity":"0.2"}, 300),
        // Animate our modal window into view
        $j('#video').css({"top":"43%"}).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 550),
        // Add our close image
        $j('#video').append('<div id="modal-vid-close" title="Close window" />');
        // Add our click CLOSE event
        $j('#overlay, #modal-vid-close').click(function () {
            //Animate our modal window out of view
            $j('#video').animate({"top": "55%", "opacity": "0"}, 350).fadeOut(200),
            // Fade out and remove our overlay
            $j('#overlay').fadeOut(200, function () { $j(this).remove(); $j('#modal-vid-close').remove()} )
        });
    });
});

我想将其变成一个插件，这样我就可以在不同的页面上使用它，只需指定“触发”链接和要在窗口中显示的 div id（它将已经加载到页面上，但隐藏） 。像这样的东西，添加到每个页面上的文档加载中：

var trigger = $j('.video_container a');
var modalcontent = $j('#video');

任何帮助，或指向好的教程的指示，非常感谢！

这是我在教程网站上找到的一个很好的模板，Queness http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial:

(function($){
    $.fn.extend({
        // change 'pluginname' to your plugin name (duh)
        pluginname: function(options) {

            // options for the plugin
            var defaults = {
                width: 500,
                height: 300
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                // main code goes here, will apply to each element of $(this)
                // e.g. `$(this).click( function() {} )`
                // also have access to `options` i.e. `options.width`
            });
        }
    });
})(jQuery);

然后将其放入您的 HTML 中：

<script type="text/javascript">
$(document).ready( function() {
    // use default options
    $('.selector').pluginname();
    // custom options
    $('.selector').pluginname({width:300, height:200});
});
</script>