CODEWITHSUNDEEP
javascriptjquerycss
S.T.
S.T.

Reputation: 39

How to style button using Jquery

I want to style my 'cancel' and 'save' button using Jquery, how can I do that? Here is my code sample (for cropping image):

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

Any suggestion?

Upvotes: 0

Views: 6922

Answers (3)

Lumi Lu
Lumi Lu

Reputation: 3305

Here is my working example in 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');
    }
});

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

If you are okay with also adding jQuery-UI, it can be very simple:

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

Example:

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

Upvotes: 1

plushyObject
plushyObject

Reputation: 1131

If you can assign an ID, it would just be:

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

Upvotes: -1

Related Questions