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

上記は、ダイアログの作成時にカスタムの open/beforeclose 関数が指定されていない場合に機能します。そのため、open/beforeclose 関数を指定する機能を維持しながら、これらの機能をすべてのダイアログに追加するベスト プラクティスは何だろうと思っています。

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 コードを少し読むだけで、すぐにコツをつかめると思います。

bodyまた、補足として、CSS プロパティをhtmlダイアログの読み込みに直接適用することには注意が必要です。これらが最初から CSS で使用できるものでない場合、誰かがアプリケーションと対話するときに安全に実行することはできません。より具体的なものを選択するか、条件付き CSS でこれらのものを単純に適用してみてください。

于 2010-04-08T04:28:24.957 に答える
2

さて、私はこれを理解したと思います。以下は、_init関数にイベントをアタッチすることによってjQueryUI関数を拡張する最も邪魔にならない方法です。

(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 に答える