Целью данной заметки является неформальное обобщение возможностей, которые дает Javascript и Ajax дизайнерам веб-сайтов и веб-интерфейсов. Информация предназначена именно для дизайнеров, вы не найдете тут описаний технических тонкостей организации тех или иных фич. Также мы воздержимся от излишнего ликбеза и расшифровки понятий.

Итак, начнем!

С каждым днём веб-интерфейсы становятся всё более похожими на традиционные десктоп приложения. И главная задача – это, естественно, достижение большего уровня интерактивности и удобства для пользователя. Добиться всего этого можно используя такой старый добрый скриптовый язык, как Javascript. Который благодаря технологии AJAX обрёл практически безграничные возможности. Но не будем обобщать, а поговорим о самом популярном фреймворке jQuery. Именно на его основе хочется показать (интересных примеров очень много) красоту и возможности современной разработки веб-интерфейсов. Вдохновляйтесь и берите на вооружение!

Меню и навигация

Красивые реализации меню, анимация.

• Lava Lamp
• jQuery UI Tabs
• Navigation Effect
• jQuery Menu: Dropdown
• iconDock

Работа с контентом

Закладки, «аккордионы», слайдеры…

• Slick Tabbed Content
• Incredible Login Form
• Horizontal Accordion
• Agile Carousel

Фотогаллереи, слайдшоу, работа с картинками

• JQZoom
• GALLERIA
• Slider Gallery
• jQuery Thumbs
• jQuery Cycle
• ThickBox

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

• Coda Bubble
• qTip
• jQuery Impromptu
• jGrowl

Работа с формами, проверка введенных данных/валидация.

Применение Ajax позволяет проверять корректность введенных данных, незанятость логина при регистрации, и даже проводить авторизацию без перезагрузки страницы. При вводе информации пользователю могут выдаваться удобные контекстные подсказки.

• jQuery Validation Plugin
• Ajax Username Check
• Masked Input Plugin
• Autocomplete
• Jeditable

Расширенная функуциональность форм, украшательства

Позволяет выводить удобные палитры для выбора цвета, календари для выбора даты, стилизировать загрузку файлов и т.д.

• Farbtastic
• File Style
• jNice
• jQuery date picker

Это лишь малая часть всего того, что можно реализовать с помощью jQuery. Ведь ещё есть работа с таблицами данными и графиками, создание контекстных меню, WYSIWYG-редакторы, всевозможные анимации, древовидные меню и прочие фишки…

Ссылки для дополнительной информации:

• 45+ Fresh Out of the oven jQuery Plugins
• 37 More Shocking jQuery Plugins
• 75 (Really) Useful JavaScript Techniques
• The ultimate jQuery Plugin List
• 45+ New jQuery Techniques For Good User Experience

Метки: ajax, jQuery, веб-дизайн, дизайн, интерфейсы