Question

我正在尝试为我的jQuery Dialog定义一些默认行为，如下所示：

(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函数的能力。

Answer 1

你在这里覆盖默认值。 可能性，不希望这样做。基本上，你正在接触并修补插件本身的编写方式。你应该附加这些行为的方式是在初始化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。我想如果你花一点时间在GitHub上阅读一些已建立的jQuery代码，你就可以很快掌握它。

另外，作为旁注，我会谨慎地将CSS属性直接应用于body和html对话框加载;如果这些东西不是可以在你的CSS中开始的东西，那么当有人与应用程序交互时，它们将不会更安全。尝试选择更具体的内容，或者只是使用条件CSS来应用这些内容。

Answer 2

好的，我想我想出来了。以下是通过在_init函数中附加事件来扩展jQuery UI函数的最少侵入性方法。

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

Answer 3

现在可以通过监听事件而不是修改对话框原型来更好地实现。当模式对话框打开时，以下代码禁用文档滚动条。当所有模态对话框关闭时，它会重新启用它们（记住可以有多个！）。

$(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: ''});
    }
  });

将默认函数添加到jQuery Dialog打开/关闭事件的最佳做法是什么？

3 个答案: