如何更改按鈕圖像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"); 
} 

Answer 2

怎麼樣，如果你在你的CSS使用的按鈕：

.button{ 

background-image: url(PATH/name_of_image.png); 

//INSERT HERE OTHERS CSS properties 

}