Блог веб-разработчика: в помощь программистам

60 профессиональных AJAX и JavaScript решений

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

Тем не менее, важно знать все возможности данной технологии, тогда в дальнейшем вы можете реализовать все эти возможности в отдельности, тем самым вы повысите качество ваших сайтов или сервисов.

[ad]

В этом посте подобрано более 60 новых полезных Ajax скриптов, библиотек и решений, которые вы сможете использовать в своих приложениях. Условия лицензионного соглашения по использованию этих скриптов могут меняться — изучайте их внимательно перед тем как использовать их в коммерческих веб-приложениях.

Полезные AJAX скрипты:

Mocha UI

Mocha библиотека для создания пользовательского интерфейса в веб приложениях, основана на javascript фреймворке – Mootools . Mocha GUI компоненты сделаны при помощи тегов графики <canvas> .

Удобный слайдер
“В последнее время мы создаём интерфейсы в которых необходимо использовать форму – слайдер, которая позволяет пользователям выбрать интервал значений на отрезке. Значения на отрезке могут означать что угодно – от часов в сутках до ёмкости MP3-плеера, вы сами можете устанавливать нужные вам данные. В простом виде, слайдер отображает значения (систему координат) с бегунками для перетягивания и выбора значения, или же можно установить 2 бегунка для выбора диапазона значений.”

FancyUpload
[ad]

Swf взаимодействует с Ajax. Виджет для аплоада файлов который позволяет осуществить мульти аплоад(несколько файлов) и имеет прогресс бар для каждого из загружаемых файлов.

Coda Popup Bubbles
“Интересная реализация попапа который появляется и отображается когда курсор находится в области изображения, и исчезает когда курсор покидает эту область.”

Демо: http://jqueryfordesigners.com/demo/coda-bubble.html

Facebook Style Input Box
Скрипт комбинирует метод автодополнения и добавление нескольких адресатов к сообщению, такой инструмент используется в Facebook. “I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)”

Демо: http://devthought.com/wp-content/articles/autocompletelist/test.html

Rich Text Editor
Rich Text Editor замена стандартной HTML форме textarea. Позволяет более функционально редактировать текст, включает уже готовые элементы структуирования такие как списки, позволяет форматировать текст, для этого доступны такие теги как bold, italic , в Rich Text Editor работает drag-and-drop включая изменение размеров изображений. Панель инструментов Rich Text Editor можно расширять при помощи плагинов, поэтому вы сами можете выбрать какие инструменты нужны, а какие будут лишними. Инструмент основан на Yahoo UI Library.

iCarousel
iCarousel это опен сорс ява скрипт инструмент для создания виджетов как на скриншоте.

Демо: http://zendold.lojcomm.com.br/icarousel/example6.asp

Ext JS – JavaScript Library

[ad]

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

Moo Wheel
Назначение этого скрипта это визуализация данных используя Javascript и <canvas>- объекты. Такой тип визуализации может быть использован для отображения соединений между большим количеством разных объектов, к примеру людей, мест , вещей и тому подобное. Распространяется под MIT лицензией.

Демо: http://www.unwieldy.net/moowheel/demo/large.html

Product Slider
Этот скрипт похожий на вертикально просматриваемую галерею, за исключением того что в этом скрипте есть слайдер для прокрутки.

Taggify Tooltips
На скриншоте видно пример использования Taggify widget, этот скрипт поможет вам украсить ваш сайт красивыми попапами на частях изображений, что бы понятнее было посмотрите демо.

Демо: http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx (прогуляйтесь курсором по первому изображению)

Gettyone Search Options Menu
Узнайте как внедрить в поиск опции как на Gettyone. Когда человек клацает на поле для поиска под ним образуется слой с дополнительными параметрами поиска.

Moo Canvas
Современные браузеры поддерживают тег <canvas> для рисования 2D объектов. Этот скрипт добавляет 3е пространство, тем самым позволяет рисовать в браузере на простом JavaScript. Для этого необходимо подкючить всего один файл к вашему сайту.

Relay – Ajax Directory Manager
Relay это основанный на Ajax файловый менеджер. Есть разделение прав пользователей, администратор может управлять загружаемыми файлами. Возможности: drag-n-drop файлов и папок,динамическая загрузка структуры папки, прогресс бар для загрузки файлов, просмотр шабнеилсов для изображений, включена поддержка pdf и разделение прав между пользователями.

GlassBox
GlassBox компактная библиотека Javascript User Interface (UI) , которая использует Prototype и Script.aculo.us для некоторых эффектов. При помощи GlassBox вы можете сделать прозрачные рамки, разноцветные стили и “Flash-like” эффекты. Посмотрите на сайт: вы можете использовать клавиатуру для навигации: Клавиши 1-8 (выбор страницы), стрелки влево/вправо (предыдущая/следующая страница) и стрелки вверх/вниз (скроллинг контента).

qGallery
qGallery скрипт галереи основанный на фреймворке Prototype который автоматически обрабатывает изображения, предоставляется множество видов просмотра а так же множество переходных эффектов.

Amberjack
Amberjack это лёгкая Open Source библиотека, которая позволяет создавать туры по сайту. JavaScript библиотека весит приблизительно ~4K, совместима со всеми браузерами, устанавливается за 2 минуты и простая в улучшении/доработке.

GWT-Ext Widget Library
GWT-Ext мощная библиотека которая предоставляет мощные виджеты, такие как сортировка таблиц, пагинация и фильтрация, Деревья с поддержкой драг енд дроп, комбо боксы, меню и тулбары, диалоговые формы, а так же много-много всего. Скрипт очень мощный и в тоже время простой в использовании API. Библиотека использует GWT и Ext.

Flexigrid
Лёгкий но мощный скрипт таблиц с возможностью изменения размеров столбцов и ячеек, а также скролингом данных с фиксироваными заголовками. Может брать данные из xml посредством подзагрузки при помощи Ajax .

[ad]

cforms II
cforms это плагин для WordPress, предлагающий удобную замену однотипным контактным формам в блоге или даже на любой странице. Отправка формы происходит через AJAX.

Masked Input Plugin
Плагин для ввода данных по маске основан на jQuery javascript библиотеке. Он позволяет более удобно контролировать ввод данных от пользователей, удобно использовать для таких полей (даты, телефоны, номера, суммы …). Работа скрипта проверялась на Internet Explorer 6/7, Firefox 1.5/2, Safari, и Opera.

Oversized Sliding Tabs
Sliding Tabs это плагин для mootools 1.11 который добавляет замечательный искусный эффект вкладок. Это клон скрипта который реализован на Panic Software’s Coda site.

Custom Checkbox with jQuery
Этот скрипт предоставляет возможность изменить стандартные чекбоксы (checkboxes) на ваших сайтах. В комлекте идут 2 темы кнопок – стандартный и сафари-скин.

NicEdit
Это редактор контента написанный на Javascript/AJAX он позволяет быстро и удобно редактировать содержании ваших сайтов прямо в браузере. Интегрировать в сайт его можно всего за пару секунд и сделать редактируемой любой элемент или слой, или же даже можно заменить все стандартные textarea формы.

AJAX Instant Messenger
Это браузерный IM клиент. Использует AJAX для создания IM общения в реальном времени – сгодится для интегрирования с социальными проектами. Для работы вам не нужно постоянно обновлять страницы, веб приложение работает в реальном времени и использует обновление через JavaScript.

Mootools animated sidebar menu
Этот мануал объяснит вам как сделать анимированное меню используя mootools. Посмотреть на работу скрипта можно прямо на сайте mootools.

LiveValidation
LiveValidation маленькая open source javascript библиотека созданная для того что бы пользователи смогли сразу же проверять формы как только заполнили её.

Creating a table with dynamically highlighted columns
Просто чудесный скрипт для оформления таблиц или даже форм, тяжело сказать, но посмотреть стоит обязателно.

Tablecloth
Tablecloth is lightweight, easy to use, ненавязчивый метод добавить стиль и поведение вашим таблицам. Добавив всего 2 строки кода к вашей странице вы получите стильные и активные таблицы которые понравятся вашим посетителям. Обязательно попробуйте поводить мышкой по таблице :).

Unobtrusive Table Actions Script
Скрипт подобно предыдущему добавляет функциональности вашим таблицам.Имеет эффекты скрытия столбцов, или рядков.

FancyForm
FancyForm мощный скрипт для замены стандартных чекбоксов (checkbox) добавляет удобство и красоту вашим формам.Легка в использовании, поддерживается всеми браузерами.

Starbox
Starbox позволяет легко орагинозовать любой вид рейтинга(голосования) при этом используется всего одно PNG изображение. Скрипт основан на Prototype javascript фреймворке. Для некоторых дополнительных эффектов можете добавить Scriptaculous библиотеку. На сайте подробно изложены варианты внедрения и кастомизации скрипта.

Style Your Website’s Search Field with JS/CSS
Продолжая внедрять ненавязчивые решения, CSSG рады представить SearchField. Этот скрипт помогает расширить возможности стандартной поисковой формы и работает без дополнительных JavaScript библиотек или правок. Работает с событиями onfocus и onblur событиями и выводит авто дополнение вашего запроса.

The sliding Date-Picker
Этот инструмент предлагает выбрать вам отрезок времени на временной шкале. Перетягивая ползунок вы увидите как меняется дата в формах.

Carousel
Prototype UI. Карусель-галерея, удобно будет в ней прокручивать большие галереии изображений.

minishowcase
Небольшая и простая php/javascript онлайн фото-галерея, использует AJAX , для работы не требует никаких баз данных или установки дополнительных скриптов, позволяет создать полноценную галерею за пару минут.

Timeline
Временная шкала это скрипт основанный на DHTML и AJAX для для визуализации событий связанных с датами. Посмотрите демо для того что бы понять в каких целях можно применять данный скрипт. Изменяйте данные перетягивая шкалу по горизонтали.

Displaying source code with Ajax
Скрипт служит для отображения исходного кода при помощи AJAX, так же добавляет нумерацию строк.

mooSlideBox 3
mooSlideBox v3 маленькая и простая замена “lightbox” .Работает в браузерах IE 6/7, Opera and Firefox.

Accessible News Slider
[ad]

Accessible News Slider это JavaScript плагин для jQuery. Служит для прокрутки новостей в блоке, новости можно подгружать динамически.

jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar)
jsProgressBarHandler это ява скрипт библиотека которая служит для создания и управления стильными прогресс барами.

CNN Style Scrolling Ticker with the Marquee Toolkit Control
Стильная бегущая строка с дополнительным рядом возможностей

mooSocialize – ajax based social bookmark widget
Небольшой виджет который занимает минимум места и при развороте даёт возможность добавить новость в большое количество социальных сетей.

CheckBoxList hover extender
Скрипт реагирует на отметку чекбокса и в попап окне позволяет выводить какие то данные отработанные на сервере, что бы понять смотрим демо.

Демо: http://blog.lavablast.com/CheckboxListHoverExtender/

Cornerz
Плагин для jQuery использующий Canvas/VML для создания закруглённых краёв

Lightview
Lightview был создан для изменения представления информации пользователям. Работает во всех современных браузерах, идеальное решение для показа изображений.

lightWindow
Другой скрипт для организации онлайн галерей или лайтбоксов на вашем сайте. Поддерживает 5 разных типов медиа: хтмл страницы, обычный строковый контент, медиа (видео, SWF, и т.д), изображения, показ других веб сайтов

DatePicker using Prototype and Scriptaculous
Удобный виджет который использует библиотеки Prototype и Scriptaculous. Отличная кастомизация формы в которые необходимо вводить даты.

ModalBox
ModalBox это JavaScript техника для создания современных диалоговых окон без использования всплывающих окон и без перезагрузки страницы.

Accordion v2.0
Скрипт гармошки имеет как горизонтальную так и вертикальную вариации.

New unobtrusive dynamic flickr badge
Удобный скрипт для пролистывания фотографий.

13 Awesome Javascript CSS Menus
13 “свежих” решений по созданию JavaScript+CSS- меню навигации.

  • Отличная подборка.

  • Огромное спасибо! Подборка просто супер!

  • пост-просто супер! столько полезной информации встретишь не часто. отлично написан: понятно и четко. особенно мне понравился скрипт для организации онлайн галереи. Очень удобно!

  • Да, реально очень много полезной информации

  • н

  • По-русски

  • О

  • Скрипт называется lightbox, как плагин для ворд пресса можно скачать здесь http://wordpress.org/extend/plugins/lightbox-2-wordpress-plugin/

  • А где собственно эти 60 профессиональных AJAX и JavaScript решений, в теле поста написано только “Когд”!?

  • Проблема с базой существует, пока что до конца сайт не востановил, так что кто видит какие то косяки – пишите

  • Однобуквенные комментарии конечно смотрятся забавно. Спасибо за обзор.

  • Спасибо за подборку!

  • На ваш сайт ругается мой AVP, говорит троян

    • у меня все ок

  • А скритп, который позволяет настроить внешний вид скроллбара или эмулирует работу скроллбара можете подсказать?

  • Кто-нибудь встречался с плагином для WordPress, который умеет показывать в бегущей строке любой текст со ссылками?

  • Много интересных вещей. Есть что подсмотреть :)

  • Давайте сюда складывать все новые интересные статьи и ответы по теме

  • Здравствуйте! Решил тут немного подкачаться но не знаю с чего начать… Может быть кто нибудь подскажет с чего дать старт или возможно какие нибудь ссылки полезные скинет, где можно почитать с чего начать.. Заранее спасибо.

You can follow any responses to this entry through the RSS 2.0 feed.

Trackbacks / Pingbacks