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

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

1 个答案: