«отключение» (серый текст, без мыши / клавиатуры) jquery UI-виджеты и обычный HTML внутри контейнера

Question

У меня есть приложение со многими формами, которые содержат флажки, которые отключают разделы формы, когда не отмечены.Чтобы упростить поддержку этих форм, я хотел бы создать один метод, который я могу использовать для «отключения» контейнера (например, DIV, содержащего пользовательский интерфейс формы), где «отключить» означает:

1. все поля ввода формы отключены (с использованием атрибута HTML disabled)
2. весь текст «набран», став его серым (# 999)
3. без элементов (особенно виджеты jQuery, такие как вкладки)) будет реагировать на ввод с клавиатуры или мыши

Для # 1 я использую jquery для применения атрибута disabled к каждому input, select и textarea.Легко.

Для # 2 я применяю класс CSS (.disabled {color:#999 !important}) к контейнеру.Для моих собственных элементов управления (например, кнопок ссылок) я добавляю дополнительные правила CSS для обработки дополнительных отключающих действий, например, превращение фона в другой цвет, как это делают реальные кнопки.

Но для виджетов jQuery UI есть общиеспособ "отключить" их, чтобы мне не пришлось создавать отдельные классы CSS и / или сценарий для обработки отключения каждого вида виджетов?Например, могу ли я применить определенный класс или вызвать конкретный метод, чтобы отключить любой виджет jQuery UI, который соответствует стандартам кодирования jQuery UI?

Я также застрял на # 3.Каков общий способ предотвратить реагирование HTML-кода внутри контейнера на ввод с клавиатуры или мыши, особенно с использованием виджетов JQuery UI?

Answer 1

Я создал виджет JQuery для этого. Я просто положил это на Github. Я использую его в приложении, где я работаю, и это здорово. Вы можете попробовать это, если хотите. (http://dougestep.com/dme/jquery-disabler-widget).

Answer 2

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

$(dialogEl).dialog("disable");

Базовая функциональность добавляет класс ui-state-disabled и атрибут aria-disabled , а не запускает никаких обработчиков .

Возможно, некоторые виджеты этого не делаютпереопределите это правильно для их конкретных случаев;вам нужно проверить.Но, похоже, в большинстве случаев это сработает.

---

Альтернативы:

Вы можете получить некоторое преимущество от применения класса ui-state-disabled, но этовероятно, будет работать только для стилизации и не будет препятствовать любому ответу.

Один из способов предотвращения ответов в некоторых браузерах - это pointer-events: none, но это , а не кросс-браузерный и своего рода взлом (дляНапример, не уверен, что у него есть поведение клавиатуры, которое вы хотите).

Answer 3

Лучший способ - поместить невидимое наложение поверх всего, что имеет события onclick и onmouseover, которые просто возвращают false. Это может быть несколько неловко, но, безусловно, наиболее эффективно.