jQuery UI对话框按钮图标

Question

能否在jQuery UI Dialog的按钮上添加图标？我已经尝试过以下方法：

$("#DeleteDialog").dialog({
    resizable: false,
    height:150,
    modal: true,
    buttons: {
        'Delete': function() {
            /* Do stuff */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
        $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
    }
});

在 "open" 函数中的选择器似乎运行得很好。如果我在 "open" 中添加以下内容：

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');

然后我会得到一个带有红色文本的删除按钮。这还不错，但我真的很想在删除按钮上也有小垃圾桶精灵图。

编辑：

我对被接受的答案进行了一些微调：

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

增加一些顶部边距可以将图标向下推，这样它看起来就像垂直居中了。 将按钮的宽度增加25像素可以防止按钮文本换行成第二行。

- Cory Grimster

---

这个问题最终在3个月前的http://bugs.jqueryui.com/ticket/6830中得到了修复。 - sayap

Answer 1

我尝试了这个，它有效：）

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]

- David K

---

如果您的网站是本地化的，这种方法就行不通了 : )，或者会变得更加复杂，因为“取消”会变成一个变量。 - ipopa

使用 ``button:first-child'替换'button:contains("Cancel")'，并通过 .next()` 连接下一个按钮。 - Yanick Rochon

Answer 2

自jQuery UI 1.10版起本地支持

从jQuery UI版本1.10.0开始，可以干净地指定按钮图标，而无需使用open事件处理程序。语法如下：

buttons: [
    {
        text: "OK",
        icons: { primary: "ui-icon-check" }
    },
    {
        text: "Cancel",
        icons: { primary: "ui-icon-closethick" }
    }
]

也可以指定一个secondary图标。

在此处查看效果。

- Jon

---

@Elaine：你不能用这种方式设置它的CSS类。如果你需要这样做，仍然需要使用open事件处理程序来完成。但也许可以通过DOM中其祖先元素或者通过目标为其中的.ui-button-text元素（由于图标设置的类），来定位该按钮？这取决于具体情况。 - Jon

@Elaine：我不确定具体是什么原因，因为a）API文档没有提到这方面的内容，b）源代码似乎与此无关（我刚刚检查了），c）我尝试了一下，但它没有成功（没有得到这个类）。你能在JSFiddle上发布一个示例吗？ - Jon

Answer 3

尝试使用此行代码将垃圾桶图标添加到“删除”按钮。该精灵必须位于单独的元素中。

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

为了防止图标出现在按钮顶部：

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');

- enduro

---

不错。这样可以将精灵放到按钮上，但它也会使按钮的高度加倍，将精灵留在左上角。 - Cory Grimster

啊，没事了，调用.width()函数可以给图标留出一些空间，防止按钮文本换行到第二行。 - Cory Grimster

现在不是最好的答案。 - Pedro Polonia

Answer 4

您可以给按钮添加id或其他属性，例如：

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }

- d1Mm

---

为什么？对我来说仍然很好用，而且比按标题选择按钮更好。 - d1Mm

它将被实现在 jQ UI 1.9 中。 - ipopa

@lonut 检查了1.9源代码，没有发现它被实现。还可以参考http://bugs.jqueryui.com/ticket/6830 - David

Answer 5

这个版本可以正常工作，而不必担心按钮上的文本

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

- Fabrizio

Answer 6

这是我使用的方法。在初始对话框定义期间，给感兴趣的按钮分配一个ID：

    buttons:
    [
        {
            id: "canxButton",
            text: "Cancel",
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () { ...

然后您可以像这样更改文本/图标：

$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });

- hoyt1969

Answer 7

那么采用基于类的方法如何？

在您的_layout.cshtml文件中加入以下内容：

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

然后，在您创建对话框的文件中，可以执行以下操作：

$("#doStuff-dialog").dialog({
    title: "Do Some Stuff",
    modal: true,
    buttons: [
        {
            text: "Yes",
            class: "my-button-submit",
            click: function () {
                $(this).dialog("close");
            }
        },
        {
            text: "No",
            class: "my-button-cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ],
    open: function () {
        stylizeButtons($("#doStuff-dialog").parent());
    }
});

这样你就不必依赖于搜索文本，而且在对话框中只需要少量的代码。我在我的应用程序中使用它来为按钮应用jquery UI样式/图标，只需给它们一个类即可。

- Pandincus

Answer 8

只是一个更新，因为我刚好遇到了自己需要做这个的情况。

我有多个对话框，它们都有相同的关闭按钮，所以讨论在你想要影响的对话框上直接放置图标很有用，以防你想要在其他对话框中的按钮上放置一个包含相同文本的图标。

另外，选择的解决方案实际上缺少几个已定义的CSS类，可以修正位置问题。

以下代码应该完全实现原始问题中所需的效果，并且更加精确。如果你想将相同的垃圾桶图标应用于所有带有删除按钮的对话框，只需将$('#DeleteDialog').parent()选择器更改为$('.ui-dialog-buttonpane')即可实现这个目标：

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');

- lsuarez

Answer 9

或者，如果您不想影响其他的对话框，

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

- Petah

Answer 10

将高度分配给".ui-dialog .ui-button"，如下所示：

.ui-dialog .ui-button {
    height:36px;
}
.ui-icon-kl_exit {
    height:32px; 
    width:32px;
    display:block;
    background-image: url('../icons/exit32.ico');
}

- jkl