Question

我想设计我的＆＃39;取消＆＃39;并且＆＃39;保存＆＃39;使用Jquery的按钮，我该怎么办？这是我的代码示例（用于裁剪图像）：

$("#img-container").dialog({
            modal: true,
            autoOpen: false,
            width: 1220,
            height: 730,
            title: "CROP IMAGE",
            closeOnEscape: false,
            dialogClass: "no-close success-dialog",
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close", $(this).parent()).hide();
            },
            buttons: {
                Cancel: function () {   /* style this 'cancel button'*/
                    $(this).dialog("close");
                },
                Save: function () {    /* style this 'save' button*/
                    document.getElementById("item-img").src = currentImage;
                    cropImage(self.imageFiles[0].name, x, y, width, height);
                    $(this).dialog("close");
                }
            }
        });

有什么建议吗？

Answer 1

以下是我在 FIDDLE

中的工作示例

<强> HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This is an example to change button style</p>
</div>

<强> JS

$( "#dialog-confirm" ).dialog({
   resizable: false,
      height:140,
      modal: true,
      buttons:{
        "Save":{
          text:'Save',
        },
        "Cancel":{
          text:'Cancel',
        }
     }
});

$('.ui-dialog-buttonpane :button').each(function(){ 
    if($(this).text() === 'Save') {
        $(this).css('background', 'green');
    }
    else if($(this).text() === 'Cancel') {
        $(this).css('background', 'red');
    }
});

Answer 2

如果您还可以添加jQuery-UI，那么它可以非常简单：

$('#buttonID').button();

示例：

jsFiddle Demo:

<强> HTML：

<div id="btn">
    <div id="middle">
        <img src="http://placekitten.com/100/180" />
    </div>
    <input id="btnOk" type="button" value="OK" />
    <input id="btnCancel" type="button" value="Cancel" />
</div>
<input id="mybutt" type="button" value="Open Dialog" />

<强>的javascript / jQuery的：

$('#btnOk').button();
$('#btnCancel').button();

$('#btn').dialog({
    autoOpen: false
});

$('#mybutt').click(function(){
    $('#btn').dialog('open');
});
$('#btnOk').click(function(){
    alert('you said OK');
    $('#btn').dialog('close');
});
$('#btnCancel').click(function(){
    alert('you said Cancel');
    $('#btn').dialog('close');
});

Answer 3

如果你可以分配一个ID，那就是：

$('#cancelButton').css('background-color','red');
$('#saveButton').css('background-color','green');

如何使用Jquery设置样式按钮

3 个答案: