3

我的模态对话框工作得很好（这意味着我可以调整每个选项），除了按钮图标选项没有效果。这是我用来生成对话框的代码：

$('#alert_div')
    .attr("title", "Delete all instances?")
    .text("Are you sure you want to delete all instances of this event between the specificed dates?  This cannot be undone.")
    .dialog({
        modal: true,
        draggable: false,
        position: { my: "top", at: "center", of: window },
        buttons: [
            {
                text: "No",
                icons: { primary: "ui-icon-check" },
                click: function() {
                    $(this).dialog('close');
                    console.log('Clicked no.');
                }
            },
            {
                text: "Yes",
                click: function () {
                    $(this).dialog('close');
                    console.log('Clicked yes');
                }
            }
        ]
    });

我已经查看了我能找到的每一个相关的 Stack Overflow 问题——例如这个。除了在打开的按钮上附加一个元素，我不知道如何解决这个问题。当我在文档的其他地方创建元素并为它们提供适当的类时，图标会正确显示。

这是打开对话框时 jQuery 为按钮生成的 HTML：

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>

我假设图标属性中应该有除 '[object Object] 之外的其他内容。为什么会这样？我正在使用 jQuery UI v. 1.12.0 和 jQuery v. 3.0.0。，我没有使用 Bootstrap。

4

3 回答 3

1

显然，问题是 jquery-ui 1.12.0 中的一个错误。如果您在小提琴中用 1.11.4 代替 1.12.0，问题就会消失。

我在自己的测试环境中运行了您的代码（您在上面发布的代码，而不是您小提琴中的代码），一切正常。（我在 5 月份下载了 1.11.4，当时它是最新的稳定版本。）似乎该button()方法在被调用时没有dialog()被调用。object Object正如您正确推测的那样，icons元素中不应该有 a 。我的按钮代码如下所示：

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
    <span class="ui-button-text">No</span>
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>

看起来这可能是 jQuery-UI 1.12.0 中的“真正的错误”。:)

编辑：看起来这实际上是 jQuery-UI 1.12.0 中的“真正的真正功能”，以及许多其他更改，其中一些更改与以前版本的兼容性。请参阅 Harpo 的“新语法”链接。任何使用菜单（尤其是菜单，旧的将不再工作）、单选按钮/复选框或其他一些东西的人都会想阅读它。

至于在一个按钮上获得两个图标，用新的语法还是可以的，但是你不能使用方法中的buttons参数来做到这一点dialog()。相反，您必须以标准方式执行按钮，为图标添加跨度。（升级文档说您可以将第二个图标跨度放在标记中，并将icon参数用于曾经是主图标的参数，但我无法在这种情况下使其工作。）所以，对于标记：

<div id="alert_div">
    <button id="okButton">
        <span class="ui-icon ui-icon-check"></span>
        Ok
        <span class="ui-icon ui-icon-circle-check"></span>
    </button>
</div>

接着：

$('#alert_div').dialog({
    open: function(e, ui) {
        $('#okButton')
        .button()
        .on('click', function() {
            $(this).dialog('close');
        });
    }
});
于 2016-07-24T21:45:20.117 回答
0

jQuery UI 1.12为按钮图标引入了一种新语法，我已经确认它修复了这个问题（参见这个 jsFiddle）。目前，它不接受已弃用的选项；已提交 PR来解决此问题。有关详细信息，请参阅我的错误报告。以下代码适用于 jQuery UI 1.12 和 jQuery 3.1.0：

$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: { my: "top", at: "top", of: window },
    buttons: [{
        text: "OK",
        icon: "ui-icon-check",
        click: function() {
            $(this).dialog("close");
        }
    }]
});
于 2016-07-25T12:33:56.173 回答
0

请看一下这是示例，我们可以对它做任何事情..

请看一下这是示例，我们可以对它做任何事情..

使用样式对其进行更改...

谢谢... ：）

于 2016-07-25T14:14:20.497 回答