Диалог jQuery-UI внутри плагина, использующий немедленный запуск - PullRequest
Новая
       14

Диалог jQuery-UI внутри плагина, использующий немедленный запуск

0 голосов
/ 29 января 2011

Я использую jQuery-UI внутри плагина и пытаюсь установить функцию обратного вызова для события close: диалога. Я полагаю, что я делаю это неправильно, так как она запускается сразу (2 раза) при загрузке страницы, а не при закрытии диалога.

Код плагина 

(function($) {

    //dynamically add UI CSS
    var link = $('<link>');
    link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/black-tie/jquery-ui.css'
    }).appendTo('head');

    //dynamically add UI JS
    var script = $('<script'>);
    script.attr({
        type: 'text/javascript',
        src: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'
    }).appendTo('head');

    $.fn.photoDialog = function(options) {

        //set default settings
        var defaults = {
            autoOpen: false,
            title: 'Photo Tool',
            minHeight: 560,
            minWidth: 540,
            url: 'http://www.goffinmoleculartechnologies.com/images/no-image-large.png',
            onClose: function(){}
        };

        //extend options to defaults
        var opts = $.extend(defaults, options);

        return this.each(function() {
            $this = $(this);
            //create UI dialog
            var $dialog = $('<div>')
                .html('<img src="' + opts.url + '" width="' + opts.minWidth + '" height="' + minHeight + '" alt="" />')
                .dialog({
                    autoOpen: opts.autoOpen,
                    title: opts.title,
                    minHeight: opts.minHeight,
                    minWidth: opts.minWidth,
                    modal: true,
                    close: opts.onClose.call(this) //callback function
                });

            //add dialog open to click function of caller
            $this.click(function() {
                $dialog.dialog('open');
                return false;
            });
        });
    };
})(jQuery);

Код страницы вызова 

$(document).ready(function() {
    $('.photoLink').photoDialog({
        url: 'http://tvrecappersanonymous.files.wordpress.com/2010/03/doozer2.jpg',
        title: 'Doozer',
        onClose: function() {
            alert('Callback'); //fires 2x when page loads
        }
    });
});

Любые предложения о том, что я делаю неправильно, приветствуются.

1 Ответ

2 голосов
/ 29 января 2011

Это потому, что вы присваиваете результат выполнения функции обратного вызова opts.onClose, а не функции. Оберните это во встроенную функцию вместо этого.

Также используйте переменную для передачи этой переменной в callback.call.

Измените ваше заявление о возврате на: 

return this.each(function() {
            var $this = $(this);
            var that = $(this);
            //create UI dialog
            var $dialog = $('<div>')
                .html('<img src="' + opts.url + '" width="' + opts.minWidth + '" height="' + minHeight + '" alt="" />')
                .dialog({
                    autoOpen: opts.autoOpen,
                    title: opts.title,
                    minHeight: opts.minHeight,
                    minWidth: opts.minWidth,
                    modal: true,
                    close: function(){
                    opts.onClose.call(that) //callback function
                    }
                });
...