20 Ajax эффектов, которые должен знать веб-разработчик (1-5)


На сайте nettuts.com была опубликована статья с примерами и исходниками 20 Ajax эффектов, способных придать вашему сайт современный вид и повысить его юзабилити. Перевод данного обзора и предлагается вашему вниманию.

Существует несколько способов добавить модной перчинки и налёта современности внешнему виду практически любого сайта. Перед вами 20 Ajax эффектов, который должен знать каждый веб-девелопер. Они входят в инструментарий любого профессионала и если вы не знали их раньше, вам так или иначе приведётся случай использовать эти эффекты в своих будущих работах.

1. Автозаполнение и список вариантов текстового поля.

Автозаполняемые поля в форме могут помочь пользователю сэкономить время и сделать процедуру заполнения более удобной. Например, выбор email адреса - это задача, которую можно запросто упростить и сделать более увлекательной (если конечно можно использовать этот эпитет в данном контексте :) при помощи тривиального Ajax эффекта. TextboxList meets Autocompletion – это пример скрипта автозаполнения, который использует такой же подход к заполнению поля, как и в известной сети Facebook. Реализация его совсем проста и интуитивно понятна. При этом данная функция автозаполнения будет полезна пользователю, да и выглядит весьма симпатично.

20 Ajax эффектов, которые должен знать веб-разработчик (1-5)


Исходник Демо

2. Ajax IM.

Ajax IM – это прекрасный мессенджер, который в работе в точности напоминает Yahoo messenger, однако при этом встроен в ваш веб-сайт в отличие от десктоп клиента яху. Ajax IM грамотно организован, и если у вас сеть своя социальная сеть ли другой сайт, на котором пользователям предполагается коммуницировать друг с другом Ajax IM будет хорошим инструментом для общения юзеров.

20 Ajax эффектов, которые должен знать веб-разработчик (1-5)


Исходник Демо

3. Валидация в режиме реального времени.

Заполнение веб форм – это одно из наиболее скучных и утомляющих занятий в сети. Большинство из них слишком длинны, собирают слишком много информации о пользователе, и зачастую ценящему своё время юзеру банально нет времени и желания их заполнять. Ну а самый мрачный момент во всём этом– это когда после заполнения формы и нажатия кнопки "Submit" перед вами выкатывается целый список ошибок и приходится добрую половину полей заполнять заново.

Один из способов избавиться от этой раздражающей проблемы - это добавить лайв валидацию вводимых данных при помощи Ajax, которая будет информировать пользователя о наличии ошибки непосредственно в момент её совершения. LiveValidation – это прекрасный, простой в применении скрипт, который просто обязан использоваться в любом сайте, в котором предполагается заполнять более-менее длинные формы.

20 Ajax эффектов, которые должен знать веб-разработчик (1-5)


Исходник Демо

4. Inline редактирование

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

Manoloweb предлагает хороший и несложный вариант реализации функции inline редактора. Это совсем небольшой скрипт, однако, в зависимости от ваших потребностей его можно сделать гораздо более сложным и функциональным.

20 Ajax эффектов, которые должен знать веб-разработчик (1-5)


Исходник Демо

5. Ajax загрузка.


Загрузка файлов при помощи Ajax гораздо симпатичнее, нежели традиционный скучный способ. Это полезно для пользователя – видеть прогресс загрузки, а для девелопера выгодно использовать способ аплоуда, который модифицирует только отдельные секции веб-страничек.

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

20 Ajax эффектов, которые должен знать веб-разработчик (1-5)


Исходник

источник: dev.by


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


19 февраля 2009  2 5 256   ajax java скрипты Версия для печати


Похожие публикации

Скруглы — border-radius inset для картинок

Некоторое время назад появилась задача для дизайнера сделать стилизованный под дикий запад сайт. Мне, как верстальщику, пришла задача от дизайнера сделать картинки и некоторые бэкграунды,... читать далее

8 способов свести дизайнера с ума

Тяпница Пятница - самое время расслабится после трубовой недели и отдохнуть, для этогоо немного профессионального юмора. Как всем известно, дизайнеры являются причиной того, что войн в мире так... читать далее

Прокрутка и внимание в веб дизайне

предлагаю вашему вниманию любопытную статью перевод которой сделан на хабрахабре. Пользователи интернета тратят 80% времени, изучая информацию на «первом экране». Несмотря на то, что прокруткой они... читать далее

Каскадные Таблицы Стилей / Сборник хаков

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только... читать далее

Скрипт падающего снега на сайте

Скрипт падающего снега обычно используют перед новым годом Собственно все элементарно! В тело html страницы вставляем Ява-скрипт и на сайте уже падает снег. Но я предлагаю более изящное решения... читать далее

Шаблон для сайта или юзабилити remix

Как часто вы меняете внешнее оформление своего сайта? Как часто об этом вас просят посетители? Возможно вас все устраивает во внешности сайта, но некоторых мелочей все же не хватает. Примерно таким... читать далее

Комментарии (2)

  1. #1 написал: cherkassy
    Группа: Гости
    19 февраля 2009 17:30

    Спасибо большое!
    • 0

       

  2. #2 написал: mhosfordbunker
    Группа: Гости
    23 февраля 2009 21:49

    Огромное спасибо
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте