В современном веб-дизайне Javascript является просто неотъемлемым компонентом. Помимо его функциональности, Javascript может значительно улучшить общее впечатление пользователя, создавая различные переходные эффекты, такие как плавные переходы и слайд-анимация. Благодаря открытой архитектуре Javascript, нам больше не придется писать отдельные скрипты с нуля. Вот 47 плагинов Javascript, которые вы можете использовать для улучшения взаимодействия пользователей с сайтом и его функциональности. Не забудьте просмотреть примеры сайтов, которые покажут вам, как можно использовать эти плагины.
На сегодняшний день две наиболее используемые среды Javascript следующие:jQuery и MooTools. Посмотрите на опрос снизу:
Вы наверняка знакомы с Lightbox - простой Javascript, используемы для наложения изображений на текущую страницу. Оригинальный Lightbox был выпущен в 2005. С тех пор было выпущено множество скриптов со схожими функциями, но использующие другие подходы и библиотеки Javascript.
Плагин lightBox для jQuery
Этот плагин аналогичен Lightbox JS, только написан на библиотеке jQuery.
Thickbox
Thickbox это плагин jQuery, который очень похож на Lightbox, разве что имеет больше функций. Он позволяет отображать: как одно, так и сразу несколько изображений, встроенное содержимое, содержимое в плавающем фрейме или же содержимое, переданное через AJAX в гибридной модели.
Обратите внимание: Web Designer Wall использует Thickbox для отображения своих галерей изображений и демонстрационных уроков.
Highslide JS
Highslide JS служит той же цели, что и Thickbox, но еще имеет и эффект зума, что позволяет перетаскивать наложенное изображение.
FancyBox
FancyBox это плагин jQuery, который был разработан для того, чтобы заменить чрезмерно используемый Lightbox. У него схожие функции, но более красивые переходные эффекты (дизайн на манер Mac).
jQZoom
jQZoom позволяет отображать увеличенные изображения пиктограмм. Эта техника повсеместно используется на сайтах электронной коммерции (посмотрите для примера сайт Gap).
Slideshow 2! для Mootools
Slideshow 2! Это класс javascript для Mootools 1.2, предназначенный для анимирования презентации изображений на вашем сайте.
SmoothGallery
Используя mootools v1.11, эта система слайдшоу и javascript-галлерей позволяет вам создавать простые и сглаженные (техника плавного перехода) галереи картинок, слайдшоу, афиши и много других классных примочек на ваш сайт.
jQuery Galleria
Galleria это галерея картинок javascript написанная в jQuery. Она подгружает изображения одно за другим из несортированного списка и отображает пиктограммы, когда загружается каждое изображение. Она может создавать различные пиктограммы, если вы выберите, масштабированные или немасштабированные, центрированные или обрезанные по размеру поля для пиктограмм, определенного в CSS.
Noobslide
NoobSlide это класс MooTools, который позволяет вам создавать слайдшоу и скользящие панели синхронизированные по таймеру. Посмотрите этот сайт для демонстрации.
Product Slider (демо)
Вот демонстрация виджета слайдера из UI библиотеки jQuery, используемого для создания слайдера с товарами, такого как на сайте Apple - Mac.
jCarousel
jCarousel это плагин jQuery позволяющий контролировать список предметов в горизонтальном или вертикальном порядке. Предметы, которые могут быть как статичным содержимым в HTML, так и загруженным с использованием (или без) AJAX, можно прокручивать вперед и назад (с анимацией или без нее).
Компонент YUI Carousel
Компонент перелистывания управляет списком содержимого (элементы HTML LI внутри тега UL), которое можно отображать вертикально или горизонтально. Содержимое можно прокручивать вверх и вниз с или без использования анимации. Содержимое может относиться к статичному HTML содержимому или список предметов может быть создан динамически "на ходу" (с или без использования AJAX).
DynamicDrive - Перелистывающиеся слайдшоу
Carousel Slideshow это широко известный скрипт DHTML для показа изображений на вашем сайте. Он отображает изображения в 3D, на манеру карусели.
iCarousel - MooTools
iCarousel это бесплатный инструмент javascript с открытым исходным кодом для создания виджетов на манер карусели. Вы также можете использовать iCarousel в качестве бегущей новостной строки/скроллера или в качестве галереи изображений.
Плагин Coda Slider
Coda Slider это плагин jQuery, который имитирует эффект слайда панелей, как на сайте Coda.
Урок jQuery по Coda Slide (демо)
Это урок с сайта jQuery For Designers, он покажет вам, как создавать панельный сладейр Coda.
Передвижные вкладки (демо)
Sliding Tabs это плагин mootools 1.11 с очень приятными эффектами. Это клон чего-то, что используется на сайте Panic Software's Coda, что в свою очередь очень похоже на виджет, используемый на сайте iTunes Music Store.
Вкладки jQuery UI
jQuery Tabs это мощный и гибкий плагин jQuery, который позволяет вам создавать полностью настраиваемую навигацию по вкладкам (очень рекомендуется).
Урок по Query Tabs (демо)
Еще один отличный урок с сайта jQueryForDesigners.com покажет вам как создавать основную навигацию по вкладкам при помощи jQuery.
MooTabs
MooTabs это крошечный (3кб) класс для MooTools. Как следует из названия, его основная задача это помогать вам в создании простых вкладок навигации.
Урок по передвижным вкладкам (демо)
Урок, взятый с сайта Nettuts.com покажет вам как создавать передвижные вкладки при помощи jQuery.
jQuery ScrollTo (демо)
Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.
SmoothScroll (демо)
Простой скрипт MooTools, который может создавать плавную прокрутку до якоря на веб-странице.
Анимированная прокрутка при помощи jQuery
Урок Learning jQuery покажет вам, как создавать анимированный эффект "прокрутки до якоря", используя лишь пару строчек кода.
jTips (демо)
Настраиваемый плагин jQuery, который отображает всплывающие строки-подсказки - или со статичным HTML или с содержимым AJAX.
Плагин jQuery Tooltip (демо)
Еще один неплохой плагин строки-подсказки.
Строка-подсказка и предварительный просмотр (демо)
Очень простой скрипт jQuery, который отображает строку-подсказку и предварительный просмотр изображения (Я использую его на Best Web Gallery).
jQuery Accordion (демо)
Этот плагин создает меню гармошку. Он работает с вложенными списками, списками определений или просто с вложенными дивками.
Меню гармошка Apple.com Sidebar (демо)
Сайт jQueryForDesigner.com покажет вам, как создать слайдер-гармошку как на сайте Apple.
MooTools Accordion
Плагин Accordion может отлично выделит и покажет тот контент, который вам необходим.
Меню изображений MooTools
Image Menu это плагин MooTools который может создать горизонтальное меню-гармошку с изображениями.
sIFR 3 (демо)
sIFR может замещать короткие отрывки простого браузерного текста текстом визуализированным выбранным вами шрифтом, независимо от того установлен ли он на системах ваших пользователей. Он выполняет свою задачу, используя комбинацию javascript, CSS, и Flash.
jQuery sIFR (демо)
Плагин jQuery, который выполнит для вас функции sIFR.
FLIR (demo)
Facelift Image Replacement это скрипт замены изображений, который динамически генерирует представление текста в изображении на вашей веб-странице в тех шрифтах, которые другим способом могут быть недоступны вашим посетителям. Сгенерированное изображение автоматически вставляется в вашу веб-страницу посредством Javascript и видимо всеми современными браузерами
A List Apart - Альтернативный стиль
Оригинальный переключатель таблиц стилей выполнен Полом Своденом (Paul Sowden). Хотите верьте, хотите нет, он был изобретен в 2001 (не такой уж и новый прием судя по всему).
Переключатель таблиц стилей на jQuery (демо)
Переключатель таблиц стилей на jQuery.
Переключатель таблиц стилей MooTools (демо)
Переключатель таблиц стилей CSS на MooTools
FancyForm - MooTools (демо)
Плагин MooTools, который заменяет установленные по умолчанию в браузере окошки метки и селективные кнопки на стилизованные.
PrettyCheckboxes - jQuery
То же, что и FancyForm, но с использованием библиотеки jQuery.
Плагин jQuery Selectbox (демо)
Простой плагин, позволяющий вам заменять формы выбора на формы с вашим стилем.
Стилизованные окошки-метки, селективные кнопки, списки выбора
Пример плагина формы ввода jQuery (демо)
Плагин jQuery, дающий пользователю подсказки, что вводить в поля ввода.
Unobtrusive Slider Control V2 (демо)
Этот скрипт позволяет вам создавать стилизованные управляющие элементы-движки привязанные к полям ввода.
Дополнительный материал по стилизации форм на сайте: Noupe.com/css/form-elements…
jQuery Validate (демо)
Тот самый плагин, позволяющий создавать формы валидации и AJAX на стороне клиента.
MooTools Validate
Плагин валидации форм MooTools (похож на jQuery Validate).
JSValidate (демо)
JSValidate это валидатор форм, который использует аспекты среды prototype и scriptaculous, чтобы создавать простой и быстрый валидатор форм. С минимальной настройкой, ваши формы будут обрабатывать чистые данные за кратчайшее время.
Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»