JQuery UI Tabs وحوار الحوار - كيفية تأكيد تبديل تبديل مع تأكيد بناءً على مكون الإضافي الحوار؟

Question

لذلك ، فإن الهدف هو تأكيد التحول إلى علامة تبويب واجهة المستخدم الأخرى باستخدام مكونات حوار واجهة المستخدم. استخدام طريقة التأكيد المشتركة بسيطة:

jQuery("#tabsContainer").tabs({
    select: function(event, ui) {
        return confirm("Some confirmation message...");
    }
});

ولكن كيفية تحقيق نفس السلوك باستخدام مربع مربع الحوار؟

أعتقد أنني يجب أن أتصل:

jQuery("#tabsContainer").tabs("select", ui.index);

في "رد فعل موافق" لكن هذا لا يعمل كما كنت أتوقع. أيضا - لا توجد أخطاء يتم الإبلاغ عنها ...

jQuery("#tabsContainer").tabs({
    select: function(event, ui) {
        jQuery("#dialogContainer").dialog({
            buttons: {
                'Ok': function() {
                    jQuery("#tabsContainer").tabs("select", ui.index);
                },
                Cancel: function() { return; }
            }
        });
        return false;
    }
});

Answer 1

مصدر مشكلتك هو ذلك window.confirm يحظر الحوار وحوار jQuery UI ليس كذلك. يمكنك الالتفاف على هذا من خلال هيكلة الكود الخاص بك بشكل مختلف. إليك واحدة من العديد من الأساليب الممكنة:

$(function() {
    jQuery('#tabsContainer').tabs({
        select: function(event, ui) {
            // only allow a new tab to be selected if the
            // confirmation dialog is currently open.  if it's
            // not currently open, cancel the switch and show
            // the confirmation dialog.
            if (!jQuery('#dialogContainer').dialog('isOpen')) {
                $('#dialogContainer')
                    .data('tabId', ui.index)
                    .dialog('open');
                return false;
            }
        }
    });

    jQuery('#dialogContainer').dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                 // a new tab must be selected before
                 // the confirmation dialog is closed
                 var tabId = $(this).data('tabId');
                 $('#tabsContainer').tabs('select', tabId);
                 $(this).dialog('close');
             },
             'Cancel': function() {
                 $(this).dialog('close');
             }
        }
    });
});