Застосуйте CSS до кнопок діалогового вікна jQuery

Отже, у мене зараз є діалогове вікно jQuery з двома кнопками: Зберегти та Закрити. Я створюю діалогове вікно, використовуючи код нижче:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Однак обидві кнопки однакового кольору, коли використовується цей код. Я хотів би, щоб кнопка Скасувати мала інший колір, ніж моя Зберегти. Чи є спосіб зробити це, використовуючи деякі вбудовані параметри jQuery? Мені не дуже допомогла документація.

Зверніть увагу, що кнопка Скасувати, яку я створюю, є заздалегідь визначеним типом, але "Зберегти" я визначаю себе. Не впевнений, чи це матиме якесь відношення до проблеми.

Будь-яка допомога буде вдячна. Дякую.

ОНОВЛЕННЯ: Консенсус полягав у тому, що тут можна було їхати двома дорогами:

1. Перевірте HTML, використовуючи плагін Firefox, як firebug , і зверніть увагу на класи CSS, які jQuery застосовує до кнопок, і вдаріть , замінюючи їх. Примітка: в моєму HTML обидві кнопки використовували однакові класи CSS і не мали унікальних ідентифікаторів, тому ця опція була вимкнена.
2. За допомогою селектора jQuery у діалоговому вікні відкрийте кнопку, яку я хотів, і додайте до неї клас CSS.

Я вибрав другий варіант і використав метод jQuery find (), оскільки, на мою думку, це більш доречно, ніж використання: first або: first-child b / c, кнопку, яку я хотів змінити, не обов'язково була першою кнопкою, переліченою в розмітка. За допомогою find я можу просто вказати назву кнопки та додати CSS таким чином. Код, який я отримав, наведено нижче:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Я перекладаю свою відповідь на подібне запитання, тому що, здається, його ніхто тут не давав, і він набагато чистіший та акуратніший:

Використовуйте buttonsсинтаксис альтернативних властивостей:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Ви можете використовувати обробник відкритих подій, щоб застосувати додатковий стиль:

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

Я думаю, що з цим можна впоратися двома способами:

1. Перевірте, чи використовується щось на зразок firebug, якщо між цими двома кнопками є різниця (у класі, ідентифікаторі тощо) і використовуйте це для адресування конкретної кнопки
2. Використовуйте щось на зразок: first-child, щоб вибрати, наприклад, першу кнопку і стиль по-іншому

Коли я дивлюся на джерело з firebug для одного з моїх діалогів, воно виявляється приблизно так:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

Тому я міг, наприклад, звернутися до кнопки Надіслати, додавши деякі стилі до .ui-state-focus (можливо, з деякими додатковими селекторами, щоб переконатись, що я замінюю стилі jquery).

До речі, я б вибрав другий варіант у цьому випадку, щоб уникнути проблем при зміні фокусу ...

Вам слід змінити слово "className" на "class"

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

Може щось подібне?

$('.ui-state-default:first').addClass('classForCancelButton');

Виберіть div, який має діалогове вікно ролі, а потім отримайте в ньому відповідні кнопки та встановіть CSS.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

Існує також проста відповідь для визначення конкретних стилів, які будуть застосовуватися лише до цієї конкретної кнопки, і ви можете мати Jquery оголосити стиль елемента при оголошенні діалогового вікна:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

після цього ось що показує html:

це дозволяє вам встановити його, але змінити його за допомогою jquery пізніше не обов'язково.

Чому б просто не перевірити згенеровану розмітку, не позначити клас на вибраній кнопці та не стилізувати його самостійно?

Я пропоную вам поглянути на HTML, який випльовує код, і подивитися, чи є спосіб однозначно ідентифікувати одну (або обидві) кнопки (можливо, атрибути id або name), а потім скористайтеся jQuery, щоб вибрати цей елемент і застосувати css клас до нього.

Якщо все-таки зауваження працює, додайте наступні стилі на аркуші стилів сторінки

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

Це змінить колір тла кнопок діалогового вікна.