0

我正在尝试为我的 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);

当我在创建对话框时没有指定自定义打开/关闭前功能时，上述方法有效。所以我想知道将这些功能添加到我的所有对话框中的最佳做法是什么，同时保留指定打开/关闭功能的能力。

4

3 回答 3

3

您在这里覆盖了默认值。更有可能的是，您不想这样做。本质上，您正在着手修改插件本身的编写方式。您应该附加这些行为的方式是在初始化 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 应用这些东西。

于 2010-04-08T04:28:24.957 回答
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);
于 2010-04-12T17:41:51.863 回答
0

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

$(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: ''});
    }
  });
于 2015-02-14T20:36:23.953 回答