Как лучше добавлять функцию по умолчанию в события открытия / закрытия jQuery Dialog? - PullRequest
Новая
       11

Как лучше добавлять функцию по умолчанию в события открытия / закрытия jQuery Dialog?

0 голосов
/ 08 апреля 2010

Я пытаюсь определить поведение по умолчанию для моих диалоговых окон jQuery, например: 

(function($) {
        /**
         * Overriding default options
         **/
        $.ui.dialog.defaults.bgiframe = true;
        $.ui.dialog.defaults.open = function() {
            if ($('.ui-widget-overlay').length == 0) return;
            if ($.browser.msie) {
                // scrollbar fix for IE
                $('html').css('overflow-y','hidden');
                $('html').css('overflow-x','hidden');
            } else {
                // disable scrollbar for other browsers
                $('body').css('overflow','hidden');
            }
        };
        $.ui.dialog.defaults.beforeclose = function(event, ui) {
            if ($('.ui-widget-overlay').length == 0) return;
            if ($.browser.msie) {
                // scrollbar fix for IE
                $('html').css('overflow-y','auto');
                $('html').css('overflow-x','auto');
            } else {
                // disable scrollbar for other browsers
                $('body').css('overflow','auto');
            }
        };
})(jQuery);

Вышеописанное работает, когда у меня нет специальной функции open / beforeclose, указанной при создании диалога. Поэтому мне интересно, как лучше добавлять эти функции во все мои диалоги, сохраняя при этом возможность задавать функции open / beforeclose.

Ответы [ 3 ]

3 голосов
/ 08 апреля 2010

Вы переопределяете значения по умолчанию здесь. Скорее, чем нет , вы не хотите этим заниматься.По сути, вы пытаетесь понять, как был написан сам плагин.Вы должны прикреплять эти виды поведения, передавая его в конфигурацию при инициализации диалогового окна jQueryUI: 

$('some selector').dialog({
    bgiframe: true,
    open: function() { /* your code */ },
    beforeclose: function(event, ui) { /* your code */ }
});

Еще более правильно, что вы должны делать, чтобы соответствовать тому, что указывает APIинициализирует диалог как обычно, а затем привязывает его к событиям: 

var $dialog = $('some selector');
$dialog.dialog({ /* your config */ });
$dialog.bind('dialogopen', function() { /* your code */ });
$dialog.bind('dialogbeforeclose', function(event, ui) { /* your code */ });

Кажется, что более глубокая проблема заключается в том, что вы еще не привыкли к jQuery.Я думаю, что если вы потратите немного времени на чтение некоторого установленного кода jQuery на GitHub, вы быстро освоите его.

Кроме того, в качестве примечания, я бы с осторожностью применил свойства CSS непосредственноbody и html при загрузке диалога;если эти вещи не являются вещами, которые можно использовать в вашем CSS для начала, они не будут безопаснее делать, когда кто-то взаимодействует с приложением.Попробуйте выбрать что-то более конкретное или просто примените эти условия с помощью условного CSS.

2 голосов
/ 12 апреля 2010

Ладно, думаю, я понял это. Ниже приводится наименее навязчивый способ расширения функций пользовательского интерфейса jQuery путем добавления событий в функцию _init. 

(function($) {
        /**
         * Overriding default options
         **/
        $.ui.dialog.defaults.bgiframe = true;

        var _init = $.ui.dialog.prototype._init;
        $.ui.dialog.prototype._init = function() {
            _init.apply(this, arguments);
            // only applying these function for modal dialog
            if (this.options.modal) {
                this.uiDialog.bind('dialogopen.ui-dialog', function() {
                    if ($.browser.msie) {
                        // scrollbar fix for IE
                        $('html').css('overflow-y','hidden');
                        $('html').css('overflow-x','hidden');
                    } else {
                        // disable scrollbar for other browsers
                        $('body').css('overflow','hidden');
                    }
                }).bind('dialogbeforeclose.ui-dialog', function() {
                    if ($.browser.msie) {
                        // scrollbar fix for IE
                        $('html').css('overflow-y','auto');
                        $('html').css('overflow-x','auto');
                    } else {
                        // disable scrollbar for other browsers
                        $('body').css('overflow','auto');
                    }
                });
            }
        }
})(jQuery);
0 голосов
/ 14 февраля 2015

Это теперь лучше достигается путем прослушивания событий вместо изменения прототипа диалога.Следующий код отключает полосы прокрутки документа, когда модальное диалоговое окно открыто.Он снова включает их, когда все модальные диалоги закрыты (помните, что их может быть больше одного!). 

$(document)
  .on('dialogopen', function(e) {
    var $el = $(e.target);
    // Modal dialogs should disable scrollbars
    if ($el.dialog('option', 'modal')) {
      $el.addClass('modal-dialog');
      $('body').css({overflow: 'hidden'});
    }
  })
  .on('dialogclose', function(e) {
    // Restore scrollbars when closing modal
    if ($('.ui-dialog .modal-dialog:visible').not(e.target).length < 1) {
      $('body').css({overflow: ''});
    }
  });
...