![]() ![]() ![]() ![]() Просто JQUERYЧто значит "просто" jQueryЭту страницу сделал "стартовой" для просмотра результатов обучения базовым методам технологии jQuery. ![]() Чтоб Вам легче было ориентироваться, поступил "как всегда": разбил всё на главы, где коротенькое описание и ссылка для перехода. Тем, кто не видел, сначала советую посмотреть тестовый сайт "как он есть". Потом, на разных страницах, будете наблюдать, как меняется его внешний вид с помощью jQuery. Постарался отобрать наиболее интересные эффекты. Один тестовый сайт использую для демонстрации результатов по этому обучающему курсу. На каждой странице показываю только один какой-нибудь эффект, метод или способ, а предыдущие отключаю! Посмотреть тестовый сайт (ещё БЕЗ воздействия каких-либо технологий) можете
ЗДЕСЬ * * * Начну с самого начала изучения этой технологии. Сразу станет ясно, чем сильно отличается jQuery от стандартного JavaScript. Основы jQueryПредлагаемый к просмотру раздел ещё не содержит никаких скриптов. Вообще-то, делал его для личного пользования в качестве пособия.
Так всегда поступаю: вместе с конспектами в тетрадях создаю их аналог на HTML. Здорово способствует запоминанию нового материала. Кроме того, людям, желающим научиться практическому использованию jQuery, очень советую не пропустить мимо своего внимания
два нижних подраздела с примерами слайд-шоу.
СМОТРЕТЬ
В скриптах вирусов НЕТ. Гарантирую! Всё писал сам. Сначала покажу то, что самому больше всего понравилось при изучении и тренировках по использованию jQuery. Это её способность "умещать большое в малом". МЕГА-меню
Даже, если бы технология jQuery ничего больше не могла бы предоставить, её стоило бы изучать лишь только ради возможности
создавать МЕГА-меню.
СМОТРЕТЬ РОТАТОР контента
Абсолютно то же самое можно сказать и про способности этой чудесной технологии для создания ротаторов контента на своём
сайте.
СМОТРЕТЬ Функции hide и showИх использование позволяет реализовать очень интересный эффект плавного исчезновения шапки сайта (да, чего угодно), с последующим её появлением. Функция fadeToЕщё более интересный эффект. Шапка сайта начинает бледнеть, как бы тает, но не полностью, а потом снова становится яркой. Автоматические циклыОбеспечивают выборочное скрытие части элементов страницы. Прописал скрипту спрятать 2 из 4-ёх верхних рисунков. "Самоходные" картинкиПри загрузке страницы, картинки выделятся рамкой и начнут неспешно изменять своё местоположение. Выстроятся в другом порядке. Закончив работу, скрипт "радостно" сообщит Вам об этом. Свернуть/Развернуть расчётную формуПолезнейший эффект(!), позволяющий экономить очень много места на странице. Сворачивать/Разворачивать можно не только расчётные формы, а вообще что угодно, абсолютно любой блок. Постепенное появление текстаНе менее интересный эффект плавного, постепенного появления текста на странице сайта. Подробно описал весь процесс, и дал два варианта кода для его создания. Подсветка строкПри наведении курсора мыши на строку таблицы, она выделяется. Убрав курсор, всё становится прежним. Проверка корректного ввода е-мейлСочетание методов обычного JavaScript и jQuery даёт интересную возможность проверять корректность
заполнения полей формы, с их выделением рамками разного цвета, и блокировать от повторной отправки сообщения, заказа, и т.д.. Подробное, пошаговое описание. Скрипт-помощник заполнения формАналогично. С помощью обычного JavaScript и ядра jQuery можно написать интересный скрипт, облегчающий
заполнение полей разных форм. В данном случае использовал его для создания страницы подписки. Смена "умолчаний"Кликните по кнопке "Отправить заявку". Вместо обычных действий "по умолчанию": отправка формы, добавится текст
в указанное скриптом место. Сколько раз кликните, столько раз и добавятся абзацы с текстом. КлонированиеОчень интересный метод. Он разрешает посетителю кликом добавлять рисунки на страницу сайта (в своём браузере, разумеется). Счётчик кликовПозволяет показать пользователю, сколько раз(?) он кликнул по тому или иному элементу веб-страницы. ФотогалереяjQuery предоставляет отличную возможность организовать фотогалерею на своём сайте.
Много времени ушло бы на самостоятельное написание такой же в стандартном JavaScript! Галерея 2Решил показать ещё одну фотогалерею, не очень сильно отличающуюся по внешнему виду от размещённой выше, но имеющую принципиальное отличие. Какое? Слайд-шоу
Не случайно отметил "звездой", предлагаемый к просмотру подраздел. Он особенный!
Сделан не на тестовом сайте, а на основном, и содержит 8(!) видов слайд-шоу, создание которых подробнейшим образом прокомментировал. Личная страничка
Аналогично. Не мог не отметить "звездой" и этот подраздел. Это сайт-визитка, имеющий свой собственный уникальный дизайн. Показываю комплексное, точечное применение освоенных современных технологий на примере действующего сайта. Веб-дизайн Блога
Точно так же. И этот подраздел заслужил быть отмеченным. Это сайт, сделанный в стиле "блог", и у него тоже свой собственный уникальный дизайн. * * * ЗаключениеКонечно же, показал здесь не все базовые возможности, предоставляемые библиотеками jQuery, а лишь некоторые.
Те, которые самому понравились больше всего. А так их гораздо больше! ![]() Не зря создатели этих замечательных библиотек взяли себе девизом слова: "Write less, do more.", что переводится как: "Пиши меньше, делай больше." Их девиз абсолютно точно отражает саму суть технологии jQuery. Кода приходится писать мало. Посмотреть много других страниц, оформленных уже с помощью дополнительных модулей, можете в разделе jQuery UI. Мой отзыв об этой технологии, и почему изучив, НЕ использовал её для остальных страниц сайта, сможете узнать в разделе "Современные технологии". Кликнув по нижней стрелке, вернётесь на промежуточную страницу выбора. |
Все права защищены. Copyright © 2009 - Коротеев Владимир.