Оформляем текстовые поля при помощи JQuery themes

Почтеннейшая публика,

Фреймворк JQuery themes позволяет легко и быстро придать одинаковый стиль всем виджетам из набора JQuery UI. Однако, простых элементов это не касается — они остаются серыми и унылыми. Мне захотелось оформить в том же стиле все остальные поля. Начнем с текстовых.

Писать специальный виджет для этого будет overkill, ограничимся простым скриптом, который подключим в Master Page:

        $(function () {
            $('input:text, input:password, textarea')
                .addClass('ui-widget ui-state-default ui-corner-all')
                .hover(
                function () {
                    $(this).switchClass('ui-state-default', 'ui-state-hover', 1);
                },
                function () {
                    $(this).switchClass('ui-state-hover', 'ui-state-default', 1);
                })
                .focus(function () {
                    $(this).addClass("ui-state-focus");
                })
                .blur(function () {
                    $(this).removeClass("ui-state-focus");
                });
        });

Вначале подключаем классы по умолчанию: ui-widget — базовый, ui-state-default — для состояния «по умолчанию», и ui-corner-all для закругления углов (не работает в IE). Метод hover задает два поведения: при наведении мышки мы меняем дефолтный класс на ui-state-hover (третий аргумент — для того, чтобы убрать плавный переход), а когда мышку убираем — все возвращается. Ну, а для событий focus и blur пишем два разных обработчика.

update
Чтобы все это работало, нужно подключить следующие скрипты:
JQuery
JQueryUI
И CSS Вашей любимой темы отсюда:
jqueryui.com/themeroller

Пост предназначен для новичков в JQuery. Я только что провел пару часов, разбираясь со всеми этими классами, захотелось сэкономить другим время…

update2
Рано я бросился писать пост, факт. Текстовым полям по дефолту надо ставить класс «ui-widget ui-widget-content ui-corner-all», по focus — добавлять класс «ui-state-highlight», а по hover вообще непонятно, что делать. Они уже год планируют добавить классы типа ui-form-default и ui-form-hover для таких случаев.