it-swarm.com.ru

Применить 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)
    }
});
74
MegaMatt

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

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

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

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

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

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

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

6
jeroen

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

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

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

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

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

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

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

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

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

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

2
eragon2262

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

1
rfunduk

Если по-прежнему ничего не работает, добавьте следующие стили в таблицу стилей страницы.

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

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

0
Qammar Feroz

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

0
Rory