Примените CSS к Диалоговым Кнопкам jQuery
Обычно я вижу статические внутренние классы. Статические внутренние классы не могут сослаться на содержание классов wherease, нестатические классы могут. Если Вы не сталкиваетесь с некоторыми коллизиями пакета (там, уже интерфейс под названием Панель в том же пакете как Foo), я думаю, что сделал бы его своим собственным файлом. Это могло также быть проектное решение осуществить логическое соединение между Foo и Панелью. Возможно, автор предназначил Панель, которая только будет использоваться с Foo (хотя статический внутренний интерфейс не осуществит это, просто логическое соединение)
6 ответов
Вы можете использовать обработчик открытого события, чтобы применить дополнительный стиль:
open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}
Я думаю, что есть два способа справиться с этим:
- Проверьте с помощью чего-то вроде firebug, есть ли различие (в классе, идентификаторе и т. д.) между двумя кнопками и использование этого для адресации конкретной кнопки
- Используйте что-то вроде: 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).
Кстати, в этом случае я бы выбрал второй вариант, чтобы избежать проблем при изменении фокуса ...
Может быть, что-то вроде этого?
$('.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");
Почему бы просто не проверить сгенерированную разметку, отметить класс на выбранной кнопке и оформить его самостоятельно?
Я предлагаю вам взглянуть на HTML, который выдает код, и посмотреть, есть ли способ однозначно идентифицировать одну (или обе) кнопки (возможно, атрибуты id или name), затем используйте jQuery, чтобы выбрать этот элемент и применить к нему класс css.