jquery - 如何在 jquery 对话框中将按钮更改为图片

Question

我有一个 jqueryUI 1.10 对话框

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

我需要使用自己的图片来代替标准按钮的文本和图标。我希望在整个网站上进行这些更改。所以我花了很多时间玩css但没有成功。如何做到这一点？

Answer 1

在搜索解决方案时，我发现了一些可行的方法。离我最近的描述在这里:Apply CSS to jQuery Dialog Buttons .但是我不愿意接受的原因是css每次改动后都要修正。尽管还不错，但我更喜欢将按钮更改为图像时的方法。

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