jQuery UI 对话框按钮图标

Question

是否可以在 jQuery UI 对话框上的按钮上添加图标？我试过这样做：

$("#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 函数中的选择器似乎工作正常。如果我将以下内容添加到“打开”：

$('.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 像素添加到按钮的宽度可防止按钮文本换行到第二行。

Answer 1

在打开方法上添加自定义图标，如下所示：

$dialog.dialog({
    resizable:false,
    draggable:false,
    modal:true,
    open:function (event, ui) {
        $(this).parents('.ui-dialog').find('.cancel.ui-button')
            .prepend('<i class="far fa-window-close"></i><span>&nbsp;&nbsp; 
                   </span>');
    },

"far fa-window-close" 是 bootstrap 很棒的图标

Answer 2

根据Dialog > buttons option 文档，您可以传递一个对象或一组选项；后者允许您自定义按钮：

按钮

类型： 对象或数组
默认值： []

支持多种类型：

• 对象：键是按钮标签，值是点击关联按钮时的回调。
• 数组：数组的每个元素都必须是一个对象，定义了要在按钮上设置的属性、属性和事件处理程序。在 另外，可以使用icons的键来控制按钮的图标 选项，showText 键可用于控制按钮的文本 选项。

$(function() {
  var buttons = [];
  buttons.push({
    text: "Yes",
    // icon options
    icons: { primary: "ui-icon-check" },
    // attributes
    "class": "hawt-button",
    title: "Aye!"
  });
  buttons.push({
    text: "Yes to All",
    icons: { secondary: "ui-icon-check" }
  });
  buttons.push({
    text: "Please",
    icons: { primary: "ui-icon-notice" },
    // text options
    showText: false
  });
  buttons.push({
    text: "Cancel",
    icons: { secondary: "ui-icon-close" },
    // properties
    disabled: true
  });
  $("#dialog").dialog({
    width: "auto",
    buttons: buttons
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

.ui-button.hawt-button {
  color: hotpink;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>

Answer 3

这是我使用的。在初始对话框定义期间为感兴趣的按钮分配一个 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"} });

Answer 4

自 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 图标。

See it in action。

Answer 5

基于类的方法怎么样？

在您的 _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 样式/图标应用于按钮，只需给它们一个类。

Answer 6

尝试使用此行将垃圾桶图标添加到删除按钮。精灵必须在一个单独的元素中。

$('.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>');

Answer 7

我遇到了同样的问题。似乎jquery将文本存储在按钮本身的一个名为“text”的属性中，而不是按钮内的文本。

我是这样解决的：

    $dialog.dialog({
        resizable:false,
        draggable:false,
        modal:true,
        open:function (event, ui) {
            $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
            //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
            $(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
        },
        buttons:[
            {
                text:"OK",
                click:function () {

                },
                "class":"add"
            },
            {
                text:"Cancel",
                click:function () {

                },
                "class":"cancel"
            }
        ]
    });

Answer 8

将高度分配给“.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');
}

Answer 9

你也可以为按钮添加 id 或其他属性，如下所示：

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

Answer 10

此版本无需担心按钮中的文本即可工作

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' }
    });
}

Answer 11

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

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' }
    });
}

Answer 12

只是一个更新，因为我发现自己需要这样做。

我有多个对话框，它们都具有相同的关闭按钮，因此讨论如何将图标直接放置在您想要影响的对话框上很有用，以防万一您希望在不同的按钮上放置图标包含相同文本的对话框。

此外，所选解决方案实际上缺少几个已定义的 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>');

Answer 13

我试过这个，它有效:)

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