jQuery UI Dialog Button Icons

Question

Is it possible to add icons to the buttons on a jQuery UI Dialog? I\'ve tried doing it this way:

$(\"#DeleteDialog\").dialog({
    resizable: false,
    hei         


        

Answer 1

assign height to ".ui-dialog .ui-button" like as following:

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

Answer 2

How about a class-based approach?

In your _layout.cshtml file put something like the following:

<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>

Then, in the file where you are creating the dialog, do something like this:

$("#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());
    }
});

Then you never have to rely on searching for text, and it requires a minimal amount of code in your dialog. I use this throughout my applications to apply jquery UI styling/icons to buttons just by giving them a class.

Answer 3

According to Dialog > buttons option documentation you can pass an object or an array of options; the latter allows you to customize the buttons:

buttons

Type: Object or Array
Default: []

Multiple types supported:

• Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
• Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. In addition, a key of icons can be used to control button's icons option, and a key of showText can be used to control button's text option.

$(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 4

Here is what I use. Assign an ID to the button of interest during the initial dialog definition:

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

Then you can change text/icon like this:

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

Answer 5

Just an update since I came across the need to do this myself.

I have multiple dialogs that both have the same close button so it's useful to talk about how one would place icons directly on the dialog you're looking to affect, just in case you would want an icon on a button in a different dialog that contains the same text.

Also the selected solution is actually missing a couple of already-defined CSS classes that would fix the positional issue.

The following code should accomplish exactly what was desired in the original question, with a little more precision. If you wanted to apply the same trash icon to all dialogs with a Delete button, changing the $('#DeleteDialog').parent() selector to $('.ui-dialog-buttonpane') would accomplish that goal:

$('#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 6

Natively supported since jQuery UI 1.10

Starting from jQuery UI version 1.10.0, it is possible to cleanly specify button icons without resorting to open event handlers. The syntax is:

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

It is also possible to specify a secondary icon.

See it in action.