將默認函數添加到jQuery Dialog打開/關閉事件的最佳做法是什麼？

Question

我試圖定義一些默認行爲，我的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); 

上述工作時，我有沒有創建對話框時，指定的自定義開啓/ beforeclose功能。所以我想知道將這些功能添加到所有對話框中的最佳做法是什麼，同時保留指定open/beforeclose函數的功能。

Answer 1

好吧，我想我明白了這一點。以下是通過在_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 2

您在這裏覆蓋默認值。 更有可能不是，你不要想要做到這一點。本質上，您正在深入瞭解插件本身是如何編寫的。你應該安裝這類行爲的方式是通過將其插入配置，當你初始化你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 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: ''}); 
    } 
    });