How to change buttons to pictures in jquery dialog

Question

I have a jqueryUI 1.10 dialog

$(".my-dialog").dialog({
    buttons: [{ text: "Cancel" },
        { text: "Submit" }}]
});

I need to use my own pictures instead standard buttons' texts and icons. I want these changes to be done all over the site. So I spent a lot of time playing with css but didn't succeed. How to do this?

maybe you question connected with this question http://stackoverflow.com/questions/3836241/how-do-i-add-a-custom-icon-to-a-standard-jquery-ui-theme — Taron Mehrabyan, Jan 11 '14 at 13:48

score 1 · Accepted Answer · edited May 23 '17 at 12:03

While searching the solution I found a few approaches that could be a way. The closest to me was described here: Apply CSS to jQuery Dialog Buttons. But the reason why I wouldn't like to take it is css should be corrected every time after changes. Despite it's not so bad I prefer the approach when a button is being changed to an image.

$(".my-dialog").dialog({
    buttons: [{ text: "Cancel", id:"cancelId" },
              { text: "Submit", id:"submitId" }}]
    create: function (event, ui) {
            setButtonStyle($("#cancelId"), "url/img/button/cancel.gif",
                function () { $(".my-dialog").dialog("close") });
            setButtonStyle($("#submitId"), "url/img/button/submit.gif",
                function () { //... });
});

function setButtonStyle(button, src, onclick) {
    var elementId = button[0].id;
    var attrs = {}
    button.replaceWith(function () {
        attrs["id"] = elementId;
        attrs["src"] = src
        return $("<img />", attrs).append($(this).contents());
    });

    var img = $("#" + elementId); 
    img.click(function () { if (onclick) onclick(); });
    img.css("cursor", "pointer");
}

How to change buttons to pictures in jquery dialog

1 Answers1