jquery dialog save cancel button styling

问题

I am using jquery ui dialogs in my application. How do I style the "Save" and "Cancel" buttons differently in a jquery dialog? So "Save" is more appealing than the "Cancel". I could use a hyper link for "Cancel", but how do I place that in the same button panel?

回答1:

Here is how to add custom classes in jQuery UI Dialog (Version 1.8+):

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
});

回答2:

In jQueryUI 1.8.9 using className rather than classes works.

$('#element').dialog({
  buttons:{
    "send":{
      text:'Send',
      className:'save'
    },
    "cancel":{
      text:'Cancel',
      className:'cancel'
    }
  });

回答3:

I'm using jQuery UI 1.8.13 and the following configuration works as I need:

var buttonsConfig = [
    {
        text: "Ok",
        "class": "ok",
        click: function() {
        }
    },
    {
        text: "Annulla",
        "class": "cancel",
        click: function() {
        }
    }
];

$("#foo").dialog({
    buttons: buttonsConfig
// ...

ps: remember to wrap "class" with quotes because it's a reserved word in js!

回答4:

It has been a while since this question was posted, but the following code works across all browsers (note although MattPII's answer works in FFox and Chrome, it throws script errors in IE).

$('#foo').dialog({
    autoOpen: true,
    buttons: [
    {
        text: 'OK',
        open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
        click: function() { alert('OK Clicked')}
    },
    {
        text: "Cancel",
        click: function() { alert('Cancel Clicked')}
    }
  ]
});

回答5:

As of jquery ui version 1.8.16 below is how I got it working.

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});

回答6:

These solutions are all very well if you only have one dialog in the page at any one time, however if you want to style multiple dialogs at once then try:

$("#element").dialog({
    buttons: {
        'Save': function() {},
        'Cancel': function() {}
    }
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();

Instead of globally selecting buttons, this gets the widget object and finds it's button pane, then individually styles each button. This saves lot's of pain when you have several dialogs on one page

回答7:

after looking at some other threads I came up with this solution to add icons to the buttons in a confirm dialog, which seems to work well in version 1.8.1 and can be modified to do other styling:

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

I'd be interested in seeing if there was a better way to do it, but this seems pretty efficient.

回答8:

I had to use the following construct in jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');

This removes all formatting and applies the replacement styling as needed.
Works in most major browsers.

回答9:

This function will add a class to every button in you dialog box. You can then style (or select with jQuery) as normal:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});

回答10:

I have JQuery UI 1.8.11 version and this is my working code. You can also customize its height and width depending on your requirements.

$("#divMain").dialog({
    modal:true,
    autoOpen: false,
    maxWidth: 500,
    maxHeight: 300,
    width: 500,
    height: 300,
    title: "Customize Dialog",
        buttons: {
            "SAVE": function () {
                //Add your functionalities here
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {}
});

回答11:

check out jquery ui 1.8.5 it's available here http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js and it has the new button for dialog ui implementation

回答12:

I looked at the HTML generated by the UI Dialog. It renders buttons pane like this:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

Adding a class to Cancel button should be easy.

$('.ui-dialog-buttonpane :last-child').css('background-color', '#ccc');

This will make the Cancel button little grey. You can style this button however you like.

Above code assumes that the Cancel button is the last button. The fool proof way to do it would be

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );

来源：https://stackoverflow.com/questions/1138291/jquery-dialog-save-cancel-button-styling

标签

jquery

jquery-ui

jquery-ui-dialog