Quelle est la meilleure pratique pour ajouter une fonction par défaut aux événements d'ouverture/fermeture de jQuery Dialog?

Question

Je suis en train de définir des comportements par défaut pour mes Dialogs jQuery comme les suivantes:

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

Les travaux ci-dessus quand j'ai aucune fonction personnalisée ouverte/beforeclose spécifié lors de la boîte de dialogue est créé. Je me demande donc quelle est la meilleure pratique pour ajouter ces fonctionnalités dans toutes mes boîtes de dialogue, tout en préservant la possibilité de spécifier les fonctions open/beforeclose.

Answer 1

D'accord, je pense avoir compris cela. Voici la façon la moins intrusive d'étendre les fonctions de l'interface utilisateur jQuery en attachant les événements dans la fonction _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); 

Answer 2

Vous remplacez les valeurs par défaut ici. Plus probablement que non, vous ne veulent pas veulent faire cela. Vous essayez de bricoler comment le plugin lui-même a été écrit, essentiellement. La façon dont vous devriez attacherai ce genre de comportements est en passant dans la configuration lors de l'initialisation de votre dialogue jQueryUI:

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

Encore plus correctement, ce que vous devez faire pour se conformer à ce que l'API spécifie initialise la boîte de dialogue comme d'habitude, puis obligatoire par la suite à ses événements:

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

Il semble comme un problème plus profond est que vous n'êtes pas habitué à jQuery pour l'instant. Je pense que si vous passez un peu de temps à lire du code jQuery sur GitHub, vous le maîtriserez rapidement.

Aussi, en note, je serais prudent sur l'application des propriétés CSS directement à body et html sur le chargement de dialogue; Si ces choses ne sont pas des choses qui peuvent commencer dans votre CSS, elles ne seront pas plus sûres quand quelqu'un interagit avec l'application. Essayez de sélectionner quelque chose de plus spécifique, ou appliquez simplement ces choses avec du CSS conditionnel.

Answer 3

Ceci est maintenant mieux réalisé en écoutant des événements au lieu de modifier le prototype de dialogue. Le code suivant désactive les barres de défilement du document lorsqu'une boîte de dialogue modale est ouverte. Il les réactive quand toutes les boîtes de dialogue modales sont fermées (rappelez-vous qu'il peut y en avoir plus d'une!).

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