Блог

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

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

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

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

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

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

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

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