Почтеннейшая публика,
Фреймворк JQuery themes позволяет легко и быстро придать одинаковый стиль всем виджетам из набора JQuery UI. Однако, простых элементов это не касается — они остаются серыми и унылыми. Мне захотелось оформить в том же стиле все остальные поля. Начнем с текстовых.
Писать специальный виджет для этого будет overkill, ограничимся простым скриптом, который подключим в Master Page:
Вначале подключаем классы по умолчанию: 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 для таких случаев.
Фреймворк 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 для таких случаев.
