20 Ajax эффектов, которые должен знать веб-разработчик (1-5)
На сайте nettuts.com была опубликована статья с примерами и исходниками 20 Ajax эффектов, способных придать вашему сайт современный вид и повысить его юзабилити. Перевод данного обзора и предлагается вашему вниманию.
Существует несколько способов добавить модной перчинки и налёта современности внешнему виду практически любого сайта. Перед вами 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
Существует несколько способов добавить модной перчинки и налёта современности внешнему виду практически любого сайта. Перед вами 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
2 Комментарии