Применить CSS к кнопкам диалогового окна jQuery

Question

Итак, у меня сейчас есть диалоговое окно 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)
    }
});

Answer 1

Я пересылаю мой ответ на аналогичный вопрос, потому что никто, похоже, не дал его здесь, и он намного чище и аккуратнее:

Использовать альтернативный синтаксис свойства 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)
    }
});

Answer 2

Вы можете использовать обработчик события open, чтобы применить дополнительные стили:

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

Answer 3

Я думаю, что есть два способа справиться с этим:

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).

Кстати, в этом случае я бы выбрал второй вариант, чтобы избежать проблем при смене фокуса ...

Answer 4

Вы должны изменить слово «className» на «class»

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

Answer 5

Выберите div, у которого есть диалоговое окно роли, затем установите соответствующие кнопки и установите CSS.

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

Answer 6

Может как то так?

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

Answer 7

Существует также простой ответ для определения конкретных стилей, которые будут применяться только к этой конкретной кнопке, и вы можете сделать так, чтобы Jquery объявлял стиль элемента при объявлении диалога:

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

после этого вот что показывает html:

выполнение этого позволяет вам установить его, но это не обязательно легко изменить с помощью jquery позже.

Answer 8

Почему бы просто не проверить сгенерированную разметку, отметить класс на кнопке выбора и стилизовать его самостоятельно?

Answer 9

Если все еще замечание работает для вас, добавьте следующие стили в свою таблицу стилей

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

Это изменит цвет фона кнопок диалога.

Answer 10

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