Как применить стили пользовательского интерфейса jQuery к обычным элементам формы, таким как теги input и select?

Question

Может быть, я что-то упустил, но после прочтения документации по jQuery UI я ничего не вижу о применении стилей темы к обычным виджетам, таким как теги input и select. После вызова button() для кнопок и datepicker() для входных тегов, которые будут выбирать даты, я должен обернуть обычные текстовые поля и входные данные в <div class="ui-widget">, чтобы придать согласованный стиль, или дать им определенный класс CSS, или при загрузке документа вызывать функцию, которая стилизует все остальное?

Answer 1

Некоторые примеры использования Jquery.

$("input:text").addClass("ui-corner-all");

$("#Submit").button();

Answer 2

Темы пользовательского интерфейса jQuery работают так же, как и любой другой документ CSS, который вы используете. Если есть определенный набор стилей для определенного элемента, часто все, что вам нужно сделать, это добавить классы, которые определяют стили, которые вы хотите, к рассматриваемому элементу.

Сложность состоит в том, что в зависимости от браузера многие элементы формы имеют различные степени стилевого оформления. В частности, Internet Explorer использует собственные элементы управления форм ОС, которые получают свой стиль по умолчанию из настроек темы ОС, в то время как другие браузеры, такие как Chrome и Firefox, используют свой собственный набор элементов управления форм и имеют собственный стиль по умолчанию.

Во многих случаях виджеты пользовательского интерфейса jQuery скрывают элементы формы по умолчанию, а затем заменяют их более настраиваемыми элементами, такими как структура <div> s, которые можно стилизовать для имитации реальных элементов формы. Эти поддельные структуры также имеют обработчики событий javascript, прикрепленные для захвата ввода и передачи его обратно фактическим элементам формы, а также для его рендеринга внутри себя.

Итак, в двух словах, применение стилей пользовательского интерфейса jQuery к элементам формы иногда может быть столь же простым, как просто применение классов темы, или иногда столь же болезненным, как необходимость имитировать фактические элементы формы. Все зависит от ваших целевых браузеров и стилей, которые вы хотите применить.