مشكلة شريط التمرير في مربع حوار jQuery UI في Chrome وSafari

Question

أنا أستخدم مربع حوار jQuery UI مع modal=true.في Chrome وSafari، يؤدي هذا إلى تعطيل التمرير عبر شريط التمرير ومفاتيح المؤشر (لا يزال التمرير باستخدام عجلة الماوس والصفحة لأعلى/لأسفل يعمل).

قد تكون هذه مشكلة إذا كان مربع الحوار طويلًا جدًا بحيث لا يمكن احتواؤه في صفحة واحدة - مما يؤدي إلى شعور المستخدمين على الكمبيوتر المحمول بالإحباط.

أثار شخص ما هذا منذ ثلاثة أشهر على أداة تعقب الأخطاء jQuery - http://dev.jqueryui.com/ticket/4671 - لا يبدو أن إصلاحه يمثل أولوية.:)

وكذلك يفعل أي شخص:

1. لديك إصلاح لهذا؟
2. هل لديك حل مقترح من شأنه أن يوفر تجربة استخدام جيدة؟

أقوم بتجربة تمرير الماوس/التمرير على أجزاء من النموذج، لكنه ليس حلاً رائعًا :(

يحرر : الدعائم لروان بينتجي (الذي ليس عضوًا في SO afaict) لإيجاد حل لهذا الأمر.تمنع واجهة مستخدم jQuery التمرير من خلال التقاط أحداث mouseup / mousedown.لذلك يبدو أن الكود أدناه يعمل على إصلاحه:

$("dialogId").dialog({
    open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
    modal: true
});

استخدم على مسؤوليتك الخاصة، لا أعرف ما قد يسمح به السلوك غير المشروط الآخر الذي يفكك هذه الأشياء.

Answer 1

أتفق مع الملصقات السابقة في أنه إذا لم يكن مربع الحوار مناسبًا لك، فقد يكون من الجيد إعادة التفكير في تصميمك.ومع ذلك، يمكنني تقديم اقتراح.

هل يمكنك وضع محتوى الحوار داخل div قابل للتمرير؟بهذه الطريقة، بدلاً من الحاجة إلى تمرير الصفحة بأكملها، سيحتاج المحتوى الموجود داخل div فقط إلى التمرير.يجب أن يكون هذا الحل البديل سهل التنفيذ أيضًا.

Answer 2

يمكنك استخدام هذا الرمز: jquery.ui.dialog.patch.js

لقد حلت المشكلة بالنسبة لي.نأمل أن يكون هذا هو الحل الذي تبحث عنه.

Answer 3

على الرغم من أنني أتفق مع عدم إجراء الأشخاص في المجموعة حوارًا أكبر من إطار العرض، إلا أنني أعتقد أن هناك حالات قد يكون فيها التمرير ضروريًا.قد يبدو مربع الحوار جيدًا جدًا في دقة أكبر من 1024 × 768، ولكن أي شيء أقل من ذلك يبدو معقّدًا.أو لنفترض على سبيل المثال أنك لا تريد أبدًا ظهور مربع حوار فوق رأس موقعك.في حالتي، لدي إعلانات تحتوي في بعض الأحيان على مشاكل في مؤشر فلاش z، لذلك لا أرغب أبدًا في ظهور مربعات حوار فوقها.أخيرًا، من السيئ بشكل عام إزالة أي نوع من التحكم الشائع، مثل التمرير، بعيدًا عن المستخدم.هذه مشكلة منفصلة عن حجم الحوار.

سأكون مهتمًا بمعرفة سبب وجود أحداث mousedown و mouseup في المقام الأول.

لقد جربت الحل الذي قدمه alexis.kennedy وهو يعمل بشكل متقطع دون كسر أي شيء يمكنني رؤيته في أي متصفح.

Answer 4

أقوم بحل هذا الموقف عن طريق تعطيل وضع الحوار المشروط وإظهار التراكب يدويًا:

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog('option', 'modal', false);

        // show overlay div manually
        var tempDiv = $("<div id='tempOverlayDiv'></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind('dialogclose', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}

Answer 5

أعتقد أن وجود مربعات حوار كبيرة جدًا يتعارض مع متطلبات "تجربة الاستخدام اللائقة".حتى لو لم يكن لديك حل بديل بسبب خطأ jQuery UI Dialog، فسأتخلص من مربعات الحوار الكبيرة هذه.على أية حال، أنا أتفهم أنه قد تكون هناك بعض الحالات "المتطرفة" التي تحتاج إلى التكيف فيها، لذا...

ومع ذلك، سيكون من المفيد بالتأكيد أن تقوم بإرفاق لقطة شاشة - فأنت تطرح سؤالاً حول تصميم ما، لكننا لا نستطيع رؤيته.لكنني أتفهم أنك قد لا تكون قادرًا/راغبًا في إظهار محتوياته، لذا فلا بأس.هذه هي بلدي أعمى التخمينات؛اتمنى ان تجدهم مفيدين:

• حاول أ تخطيط مختلف للحوار الخاص بك.إذا قمت بذلك، فافعل ذلك لجميع مربعات الحوار، وليس فقط تلك التي تواجه مشكلة فيها (لا يحب المستخدمون التعرف على العديد من واجهات المستخدم المختلفة).
• إذا لم تتمكن من العثور على تخطيط مختلف، حاول توسيع الحوار الخاص بك أولاً.إذا كان لديك العديد من الخيارات للاختيار من بينها، فقد تجد حلاً جيدًا عن طريق تقسيمها إلى عمودين.
• مع العلم أنك تستخدم بالفعل jQuery UI، حاول استخدام نوافذ التبويب.إذا كان لديك الكثير من الخيارات، فعادةً ما تكون اللوحة المبوبة حلاً جيدًا - فالمستخدمون "معتادون" على هذه الأداة.
• لقد تحدثت عن "العناصر" في مربع الحوار، لكننا لا نعرف ما هو العنصر.هل من الممكن على الإطلاق إظهارها بطريقة "ملخصة" مثل قائمة صغيرة على اليسار وعرض موسع على اليمين عند النقر عليها؟على سبيل المثال، وجود قائمة بعناوين العناصر على اليسار، وعندما تنقر عليها تحصل على العرض الكامل على اليمين.

دون أن أتمكن من رؤية التصميم، أعتقد أن هذا أقصى ما أستطيع الوصول إليه.

Answer 6

يوجد حل بديل يؤدي إلى إلغاء ربط الحدث المقيد.وهذا يضيف ما يلي في العلن:حدث الحوار :

$("#longdialog").dialog({
    modal:true,
    open: function (event, ui) { window.setTimeout(function () {
        jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
    }
});

هذا يعمل ...ولكن هذا قبيح

--من https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

عملت مثل السحر في حالتي.

Answer 7

هذا هو الخلل الذي تم إصلاحه منذ ذلك الحين:http://bugs.jqueryui.com/ticket/4671

Answer 8

هل حاولت تمديد بلدي إلى الحوار؟ http://plugins.jquery.com/project/jquery-framedialog

Answer 9

استخدم الكود أدناه.وسوف تعمل بشكل جيد.

$("dialogId").dialog({
      open: function(event, ui) {
            window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                        .unbind('mouseup.dialog-overlay');
             }, 100);
      },
      modal: true,
      safariBrowser: (function( $, undefined ) {
               if ($.ui && $.ui.dialog) {
                   $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
               }
 }(jQuery))
});