jQuery UI
Пользовательские интерфейсы

Немного о jQuery UI

В этом смежном разделе покажу результаты обучения по лицензионному, авторскому видео-курсу jQuery UI, что означает User Interface ("Пользовательские интерфейсы").

Данный курс - практическая тренировка по jQuery, поскольку jQuery UI не какая-то там новая технология, а продолжение всё той же jQuery, только великолепно расширенной "пользовательскими библиотеками" jQuery UI.

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

Результаты обучения покажу на "живом", действующем сайте, который свёрстан по принципам HTML+CSS  блочной вёрстки.

Для начала посмотрите тестовый сайт "как он есть".
Потом, на разных страницах, увидите интересные изменения его внешнего вида, сделанные с помощью jQuery UI.

* * *

Один тестовый сайт использую для демонстрации результатов по этому обучающему курсу, поэтому на каждой странице показываю только один какой-либо эффект, метод или способ, а предыдущие отключаю!

Посмотреть тестовый сайт (только с подключённым ядром jQuery UI) можете ЗДЕСЬ

* * *

В скриптах вирусов НЕТ. Точно! Управляющие скрипты писал сам.
Подключённые внешние проверены антивирусом Касперского.

jQuery UI Эффекты

Два очень интересных эффекта подключил к возможности СКРЫТЬ/ПОКАЗАТЬ расчётную форму: "взрыв" и "плавное появление".
СМОТРЕТЬ

Интерактивные возможности

Интереснейший эффект! Всё двигается. Можете "растащить сайт на части". Прописал скрипту разрешить двигать что угодно и куда угодно. Практически страница опустеет (разумеется, в Вашем браузере), если пожелаете.
Именно методы перетаскивания элементов используют для конструкторов сайтов.
СМОТРЕТЬ

jQuery UI Эффекты: цветовая анимация

Интересный и полезный эффект animate даёт возможность пользователю самому менять фоновые цвета блоков.
СМОТРЕТЬ

Назначить контейнером

Метод jQuery UI droppable позволяет любой элемент назначить контейнером. С этим способом знакомы все. Используется практически во всех интернет-магазинах. Сделал импровизированный интернет-магазин на предлагаемой к просмотру странице.
СМОТРЕТЬ

Виджеты: календарь

Один из самых популярных виджетов. Часто встречаю его на разных ресурсах, особенно использующих формы с полями для ввода даты.
СМОТРЕТЬ

Виджеты: изменяемые размеры блока

Сможете сами установить размер тестового текстового блока. Вспомогательная рамка поможет определить, какое место займёт изменяемый блок.
СМОТРЕТЬ

Виджеты: слайдер диапазона

Позволит самим устанавливать пределы, используя ползунки слайдера. Добавил его в форму расчёта стоимости.
СМОТРЕТЬ

Ссылки-кнопки

Под действием jQuery UI любая ссылка превратится в кнопку с соответствующим оформлением.
СМОТРЕТЬ

Виджеты: выбор

Такой виджет позволяет пользователю выбирать что-либо. Покажу на примере цифр. Сможете выделить - выбрать любое их количество.
СМОТРЕТЬ

Всплывающие подсказки

Полезный и часто используемый на многих сайтах виджет. Кликнув по слову, рисунку или какому другому "активатору", человеку выводится подсказка.
СМОТРЕТЬ

Виджеты: аккордеон

Один из самых полезных и часто используемых многими ресурсами виджет. Позволяет экономить ОГРОМНОЕ количество места на странице.
СМОТРЕТЬ

Виджеты: сортируемые элементы

Этот виджет разрешает сортировать элементы страницы, что вполне может найти интересное применение.
СМОТРЕТЬ

Виджеты: умные вкладки

И это тоже один из самых полезных, нужных и популярных виджетов. По крайней мере, один из моих самых любимых.
Да только из-за него одного стоило изучать jQuery UI!!!
СМОТРЕТЬ

Добавить/Удалить класс

Использование таких методов: addClass и removeClass предоставляет пользователю интересную возможность самому менять стили текста на страницах Вашего сайта.
СМОТРЕТЬ

Переключение классов

Метод toggleClass ещё более интересный. Также разрешает менять стили текста, так ещё и управляющую кнопку "ПРОВЕРИТЬ" можно заставить моргать.
СМОТРЕТЬ

Переключатель классов

Эффект от применения метода switchClass похож на предыдущие два, но тем не менее это ОСОБЕННЫЙ способ. Сами сможете переключать цвет, размер, и т.д., то-есть менять стили страницы сайта, причём неоднократно!
СМОТРЕТЬ

* * *

Заключение

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

Конечно же, показал далеко не всё, а лишь (для "Портфолио") самое интересное, чему научился в использовании возможностей jQuery UI, которых огромное количество.
** И кстати - они БЕСПЛАТНЫ!

Так почему же, изучив, не использую их для ВСЕХ страниц своего сайта?!

Всё очень просто!!!
Коротко: "Сапожник без сапог"!

Ну а серьёзно, с подробностями, в деталях и наглядно, при желании узнаете на смежной странице, которую специально создал посвящённую этому вопросу.

Так и назвал её: "Современные технологии".

Мой отзыв об этих технологиях, и почему изучив, НЕ использовал их для остальных страниц сайта, сможете узнать в разделе "Современные технологии".

ВВЕРХ