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

65

Итак, у меня есть диалог 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? Я не получил большую помощь от документации.

Обратите внимание, что кнопка "Отмена", которую я создаю, является предопределенным типом, но "Сохранить" я определяю сам. Не уверен, что это повлияет на проблему.

Любая помощь будет оценена по достоинству. Спасибо.

ОБНОВЛЕНИЕ: Консенсус состоял в том, что здесь было две дороги:

  • Осмотрите HTML с помощью Firefox плагин, например firebug, и обратите внимание классы CSS, которые jQuery применяя к кнопкам, и ударить их. Примечание: в мой HTML, обе кнопки были использованы точно такие же классы CSS и уникальные ID, поэтому этот параметр отсутствовал.
  • Использовать селектор 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)
    }
});
Теги:
button
dialog

10 ответов

104
Лучший ответ

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

Используйте альтернативный синтаксис свойства 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)
    }
});
Поделиться
  • 11
    Похоже, что в новых версиях jQuery UI (или jQuery, я не могу сказать) вы могли бы изменить ключ для дополнительных классов с className на "class" .
  • 0
    В версии> jqueryui 1.8. существует класс, а не className.
Показать ещё 2 комментария
13

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

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }
Поделиться
6

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

  • Проверьте, используя что-то вроде firebug, если между этими двумя кнопками есть разница (в классе, id и т.д.) и используйте это для обращения к определенной кнопке
  • Используйте что-то вроде: 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).

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

Поделиться
  • 0
    для добавления к решению о состоянии фокуса кнопки.
4

Вы должны изменить слово "className" для "class" 

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],
Поделиться
  • 4
    использование class: 'ui-state-default2' может вызвать проблемы с браузером, так как class является ключевым словом в некоторых версиях JavaScript ( для справки ). "class" : 'ui-state-default2' этого используйте "class" : 'ui-state-default2' .
3

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

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");
Поделиться
  • 0
    другие ответы, в которых говорилось об использовании опции диалога «открыть», у меня не работали (хотя селектор, который я использовал, был правильным, если он использовался после открытия диалога), но это сработало.
3

Может быть, что-то вроде этого?

$('.ui-state-default:first').addClass('classForCancelButton');
Поделиться
1

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

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

после этого вот что показывает html: Изображение 7738

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

Поделиться
1

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

Поделиться
  • 1
    -1, сгенерированная разметка не уникальна
  • 0
    Он не предоставил разметку. Мой ответ был написан за пару часов до его обновления, где он указывает этот факт.
0

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

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

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

Поделиться
0

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню