动态更改 jQueryUI 对话框按钮 [英] Dynamically changing jQueryUI dialog buttons

问题描述

尝试动态更改多个 jQuery UI dialog() 按钮.

Attempting to change multiple jQuery UI dialog() buttons on the fly.

下面代码的问题是在 dialog() 的第一个实例中只显示一个按钮.应该显示两个按钮.

The problem with below code is that only one button is displayed at the first instance of the dialog(). Two buttons should be displayed.

jsFiddle在这里:

$(function(){
    var dlg = $('#message');

    dlg.dialog({
        autoOpen:false,
        modal:true,
        width: 500,
        close: function() {
            if (seen==0 && ans > 0) {
                cnt++;
                seen++;
                dlg.html('Here is a second message');
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'OK',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
        }
    });

    $('#myDiv').hover(
        function() {
            //Hover-in
            if (cnt < 1 || (cnt > 2 && cnt < 4) || (cnt > 5 && cnt < 7)) {

                var msg = 'First display text goes here';
                dlg.html(msg);
                dlg.dialog(
                    'option',
                    'buttons',
                        [{
                            text: 'Download',
                            click: function() {
                                ans++;
                                $(this).dialog('close');
                            },
                            text: 'Not now',
                            click: function() {
                                $(this).dialog('close');
                            }
                        }]
                );
                dlg.dialog('open');
            }
            cnt++;
        },
        function() {
            //Hover-out
            //need this to prevent duplicating hover-in code (double-display dlg)
        }
    );

}); //END document.ready

推荐答案

我已经尝试将 Object 类型用于 buttons 并且它有效:

I have tried to use the Object type for the buttons and it works :

dlg.dialog(
    'option',
    'buttons', {
        "Download": function () {...},
        "Not now": function () {...}
    }
);

见更新的jsFiddle

Object:键是按钮标签，值是点击关联按钮时的回调.

Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.

但是您的数组中有错误，您必须有一个对象数组，并且缺少 { 和 }.

EDIT : But you had an error in your array, you must have an array of object and there were missing { and }.

'buttons', [
    {
        text: "Download",
        click: function () {...}
    },
    {
        text: "Not now",
        click: function () {...}
    }
]

参见更正你的jsFiddle

这篇关于动态更改 jQueryUI 对话框按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！