Логотип Валидатор Валидатор Качество создания сайта

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


Немного о jQuery UI

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

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

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

jQuery UI

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

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

* * *

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

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

* * *

Важно! jQuery UI - это тоже JavaScript, т.е. "скриптовые" файлы с расширением js.
Если Вы отключили у себя в браузере интерпретатор javascript, увидеть действие скрипта Вы не сможете!

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


jQuery UI Эффекты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* * *

Заключение

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

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

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

Символ

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

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

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

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

Назад

ВВЕРХ

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru