Применить 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 применяясь к кнопкам, возьмите ударьте по преодолению их. Примечание: in мой 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)
    }
});
10 70
css jquery jquery-ui-sortable back-button jquery-ui-dialog

10 ответов:

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

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

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

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

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

  1. Проверьте, используя что-то вроде firebug, если есть разница (в классе, id и т. д.) между двумя кнопками и использовать это для решения конкретной кнопки
  2. Используйте что-то вроде :первый ребенок, чтобы выбрать, например, первую кнопку и стиль, что один по-другому

когда я смотрю на источник с 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>

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

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

6

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

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

что-то вроде этого?

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

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

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

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

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

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

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

2

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

1

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

0

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

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

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

0