帮助将jQuery脚本转换为插件

Question

轻松一切

因为我最近一直在学习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()} )
        });
    });
});

我想把它变成一个插件,所以我可以在不同的页面上使用它,只需指定'trigger'链接,并在窗口中显示div id(它已经被加载到页面上,但是已隐藏) .像这样的东西,添加到每个页面上的doc加载:

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

任何帮助,或指向好教程的指针,非常感谢!

Answer 1

这是一个很好的模板,我在教程网站上找到了,Queness:

(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>