Помогите превратить скрипт jQuery в плагин

Question

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, который будет отображаться в окне (он уже будет загружен на страницу но спрятано). Примерно так, добавлено в doc load на каждой странице:

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>

Answer 2

Я нашел официальное руководство по созданию плагинов для jQuery очень хорошо, и есть также эта статья в Learning jQuery , которая поможет вам понять, что происходит немного лучше.

Answer 3

ОК, благодаря учебнику по Queness, я на 99%! Приветствия Рассерженные за ссылку. Все хорошо, за исключением того, что теперь мое модальное окно не закрывается. Должно ли это быть в отдельной «закрытой» функции или как? Вот новый код:

<script type="text/javascript">
(function($){
$.fn.extend({
    mynewmodal: function(options) {

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

и затем инициировать его:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready( function() {
$j('.video_container a').mynewmodal({ container: "#video" });
});
</script>