20 Ajax эффектов, которые должен знать веб-разработчик (1-5)
Существует несколько способов добавить модной перчинки и налёта современности внешнему виду практически любого сайта. Перед вами 20 Ajax эффектов, который должен знать каждый веб-девелопер. Они входят в инструментарий любого профессионала и если вы не знали их раньше, вам так или иначе приведётся случай использовать эти эффекты в своих будущих работах.
1. Автозаполнение и список вариантов текстового поля.
Автозаполняемые поля в форме могут помочь пользователю сэкономить время и сделать процедуру заполнения более удобной. Например, выбор email адреса - это задача, которую можно запросто упростить и сделать более увлекательной (если конечно можно использовать этот эпитет в данном контексте :) при помощи тривиального Ajax эффекта. TextboxList meets Autocompletion – это пример скрипта автозаполнения, который использует такой же подход к заполнению поля, как и в известной сети Facebook. Реализация его совсем проста и интуитивно понятна. При этом данная функция автозаполнения будет полезна пользователю, да и выглядит весьма симпатично.
Исходник Демо
2. Ajax IM.
Ajax IM – это прекрасный мессенджер, который в работе в точности напоминает Yahoo messenger, однако при этом встроен в ваш веб-сайт в отличие от десктоп клиента яху. Ajax IM грамотно организован, и если у вас сеть своя социальная сеть ли другой сайт, на котором пользователям предполагается коммуницировать друг с другом Ajax IM будет хорошим инструментом для общения юзеров.
Исходник Демо
3. Валидация в режиме реального времени.
Заполнение веб форм – это одно из наиболее скучных и утомляющих занятий в сети. Большинство из них слишком длинны, собирают слишком много информации о пользователе, и зачастую ценящему своё время юзеру банально нет времени и желания их заполнять. Ну а самый мрачный момент во всём этом– это когда после заполнения формы и нажатия кнопки "Submit" перед вами выкатывается целый список ошибок и приходится добрую половину полей заполнять заново.
Один из способов избавиться от этой раздражающей проблемы - это добавить лайв валидацию вводимых данных при помощи Ajax, которая будет информировать пользователя о наличии ошибки непосредственно в момент её совершения. LiveValidation – это прекрасный, простой в применении скрипт, который просто обязан использоваться в любом сайте, в котором предполагается заполнять более-менее длинные формы.

Исходник Демо
4. Inline редактирование
Возможность редактировать что-нибудь в inline режиме – это небольшая эстетическая фишка, которая может сделать процесс использования вашего ресурса более удобным и запоминающимся. Что может быть изящней, чем возможность два раза кликнуть по текстовому полю и быть способным сразу же его редактировать?
Manoloweb предлагает хороший и несложный вариант реализации функции inline редактора. Это совсем небольшой скрипт, однако, в зависимости от ваших потребностей его можно сделать гораздо более сложным и функциональным.

Исходник Демо
5. Ajax загрузка.
Загрузка файлов при помощи Ajax гораздо симпатичнее, нежели традиционный скучный способ. Это полезно для пользователя – видеть прогресс загрузки, а для девелопера выгодно использовать способ аплоуда, который модифицирует только отдельные секции веб-страничек.
Так как вариантов реализации загрузки при помощи Ajax технологий существует немало, приведём для примера самый простой способ. У AnyExample есть прекрасный туториал по созданию базовой Ajax загрузки, которая может использоваться в чистом виде или же усложненном и модифицированном. Если вам необходимо готовое решение попробуйте jqUploader на jQuery или вот эти скрипты для загрузки сразу нескольких файлов.

Исходник
источник: dev.by
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Из песочницы] Способы создания окон PopUp
Введение В данном уроке я не открою тайну для матерых верстальщиков и гуру css, но данная статья будет полезна начинающим. именно здесь вы сможете узнать, как создавать всплывающие окна поверх всего... читать далее
61 способ улучшить SEO вашего сайта
Недавно мы закончили курс по SEO в Нетологии и составили для себя чек-лист того, что обязательно нужно сделать на сайте «Я люблю ИП» для поисковой оптимизации. Но эти советы универсальны для любого... читать далее
Скрипт падающего снега на сайте
Скрипт падающего снега обычно используют перед новым годом Собственно все элементарно! В тело html страницы вставляем Ява-скрипт и на сайте уже падает снег. Но я предлагаю более изящное решения для... читать далее
Бесплатная подборка из 40 эффектов CSS
В посте собрана подборка различных эффектов и анимации CSS, которые могут пригодиться в работе, а кроме того избавят от необходимости постоянно прибегать к JavaScript. Возможно примеры не самые новые... читать далее
8 способов свести дизайнера с ума
Тяпница Пятница - самое время расслабится после трубовой недели и отдохнуть, для этогоо немного профессионального юмора. Как всем известно, дизайнеры являются причиной того, что войн в мире так... читать далее
Шаблон для сайта или юзабилити remix
Как часто вы меняете внешнее оформление своего сайта? Как часто об этом вас просят посетители? Возможно вас все устраивает во внешности сайта, но некоторых мелочей все же не хватает. Примерно таким... читать далее
Комментарии (2)
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 javascript JavaScript js layout react seo SEO на Хабрахабре vue Блог компании RUVDS.com Веб-дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт блог браузеры верстка вёрстка дайджест интернет-магазин информационный ресурс корпоративный сайт модуль мы рекомендуем портфолио разработка ссылки фронтенд
Реклама на сайте Веб студия в Киеве hover