Когда приходится разрабатываться современные веб-приложения, Ajax рассматривают как стандартный подход. Интерактивные решения для лайтбоксов, проверки форм, навигации, поиска, всплывающих подсказок и таблиц создают при помощи Ajax библиотек и популярных Ajax скриптов. Ajax полезный и мощный. Как бы то ни было, при использовании технологии Ajax, не стоит забывать о юзабилити и доступности приложения. При чрезмерном использовании технологии Ajax, вы легко можете запутать ваших пользователей предоставляя им слишком много кон� �роля над приложением и предоставляя им излишние возможности.
Тем не менее, важно знать все возможности данной технологии, тогда в дальнейшем вы можете реализовать все эти возможности в отдельности, тем самым вы повысите качество ваших сайтов или сервисов.
В этом посте подобрано более 60 новых полезных Ajax скриптов, библиотек и решений, которые вы сможете использовать в своих приложениях. Условия лицензионного соглашения по использованию этих скриптов могут меняться — изучайте их внимательно перед тем как использовать их в коммерческих веб-приложениях.
Полезные AJAX скрипты:
Mocha библиотека для создания пользовательского интерфейса в веб приложениях, основана на javascript фреймворке - Mootools . Mocha GUI компоненты сделаны при помощи тегов графики <canvas> .
"В последнее время мы создаём интерфейсы в которых необходимо использовать форму - слайдер, которая позволяет пользователям выбрать интервал значений на отрезке. Значения на отрезке могут означать что угодно - от часов в сутках до ёмкости MP3-плеера, вы сами можете устанавливать нужные вам данные. В простом виде, слайдер отображает значения (систему координат) с бегунками для перетягивания и выбора значения, или же можно установить 2 бегунка для выбора диапазона значений."
Swf взаимодействует с Ajax. Виджет для аплоада файлов который позволяет осуществить мульти аплоад(несколько файлов) и имеет прогресс бар для каждого из загружаемых файлов.
"Интересная реализация попапа который появляется и отображается когда курсор находится в области изображения, и исчезает когда курсор покидает эту область."
Демо:
Скрипт комбинирует метод автодополнения и добавление нескольких адресатов к сообщению, такой инструмент используется в 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)"
Демо:
Rich Text Editor замена стандартной HTML форме textarea. Позволяет более функционально редактировать текст, включает уже готовые элементы структуирования такие как списки, позволяет форматировать текст, для этого доступны такие теги как bold, italic , в Rich Text Editor работает drag-and-drop включая изменение размеров изображений. Панель инструментов Rich Text Editor можно расширять при помощи плагинов, поэтому вы сами можете выбрать какие инструменты нужны, а какие будут лишними. Инструмент основан на .
iCarousel это опен сорс ява скрипт инструмент для создания виджетов как на скриншоте.
Демо: http://zendold.lojcomm.com.br/icarousel/example6.asp
Исчерпывающий JavaScript-фреймворк с многочисленными модулями и компонентами, такими как таблицы, деревья, окна, слои, формы, вкладки.Все они выглядят так, как на привычных десктопных приложениях, на скриншоте пример.
Назначение этого скрипта это визуализация данных используя Javascript и <canvas>- объекты. Такой тип визуализации может быть использован для отображения соединений между большим количеством разных объектов, к примеру людей, мест , вещей и тому подобное. Распространяется под MIT лицензией.
Демо: http://www.unwieldy.net/moowheel/demo/large.html
Этот скрипт похожий на вертикально просматриваемую галерею, за исключением того что в этом скрипте есть слайдер для прокрутки.
На скриншоте видно пример использования , этот скрипт поможет вам украсить ваш сайт красивыми попапами на частях изображений, что бы понятнее было посмотрите демо.
Демо: http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx (прогуляйтесь курсором по первому изображению)
Узнайте как внедрить в поиск опции как на . Когда человек клацает на поле для поиска под ним образуется слой с дополнительными параметрами поиска.
Современные браузеры поддерживают тег <canvas> для рисования 2D объектов. Этот скрипт добавляет 3е пространство, тем самым позволяет рисовать в браузере на простом JavaScript. Для этого необходимо подкючить всего один файл к вашему сайту.
Relay это основанный на Ajax файловый менеджер. Есть разделение прав пользователей, администратор может управлять загружаемыми файлами. Возможности: drag-n-drop файлов и папок,динамическая загрузка структуры папки, прогресс бар для загрузки файлов, просмотр шабнеилсов для изображений, включена поддержка pdf и разделение прав между пользователями.
GlassBox компактная библиотека Javascript User Interface (UI) , которая использует Prototype и Script.aculo.us для некоторых эффектов. При помощи GlassBox вы можете сделать прозрачные рамки, разноцветные стили и "Flash-like" эффекты. Посмотрите на сайт: вы можете использовать клавиатуру для навигации: Клавиши 1-8 (выбор страницы), стрелки влево/вправо (предыдущая/следующая страница) и стрелки вверх/вниз (скроллинг контента).
qGallery скрипт галереи основанный на фреймворке Prototype который автоматически обрабатывает изображения, предоставляется множество видов просмотра а так же множество переходных эффектов.
Amberjack это лёгкая Open Source библиотека, которая позволяет создавать туры по сайту. JavaScript библиотека весит приблизительно ~4K, совместима со всеми браузерами, устанавливается за 2 минуты и простая в улучшении/доработке.
GWT-Ext мощная библиотека которая предоставляет мощные виджеты, такие как сортировка таблиц, пагинация и фильтрация, Деревья с поддержкой драг енд дроп, комбо боксы, меню и тулбары, диалоговые формы, а так же много-много всего. Скрипт очень мощный и в тоже время простой в использовании API. Библиотека использует и .
Лёгкий но мощный скрипт таблиц с возможностью изменения размеров столбцов и ячеек, а также скролингом данных с фиксироваными заголовками. Может брать данные из xml посредством подзагрузки при помощи Ajax .
cforms это плагин для WordPress, предлагающий удобную замену однотипным контактным формам в блоге или даже на любой странице. Отправка формы происходит через AJAX.
Плагин для ввода данных по маске основан на jQuery javascript библиотеке. Он позволяет более удобно контролировать ввод данных от пользователей, удобно использовать для таких полей (даты, телефоны, номера, суммы …). Работа скрипта проверялась на Internet Explorer 6/7, Firefox 1.5/2, Safari, и Opera.
Sliding Tabs это плагин для mootools 1.11 который добавляет замечательный искусный эффект вкладок. Это клон скрипта который реализован на Panic Software's .
Этот скрипт предоставляет возможность изменить стандартные чекбоксы (checkboxes) на ваших сайтах. В комлекте идут 2 темы кнопок - стандартный и сафари-скин.
Это редактор контента написанный на Javascript/AJAX он позволяет быстро и удобно редактировать содержании ваших сайтов прямо в браузере. Интегрировать в сайт его можно всего за пару секунд и сделать редактируемой любой элемент или слой, или же даже можно заменить все стандартные textarea формы.
Это браузерный IM клиент. Использует AJAX для создания IM общения в реальном времени - сгодится для интегрирования с социальными проектами. Для работы вам не нужно постоянно обновлять страницы, веб приложение работает в реальном времени и использует обновление через JavaScript.
Этот мануал объяснит вам как сделать анимированное меню используя mootools. Посмотреть на работу скрипта можно прямо на сайте mootools.
LiveValidation маленькая open source javascript библиотека созданная для того что бы пользователи смогли сразу же проверять формы как только заполнили её.
Просто чудесный скрипт для оформления таблиц или даже форм, тяжело сказать, но посмотреть стоит обязателно.
Tablecloth is lightweight, easy to use, ненавязчивый метод добавить стиль и поведение вашим таблицам. Добавив всего 2 строки кода к вашей странице вы получите стильные и активные таблицы которые понравятся вашим посетителям. Обязательно попробуйте поводить мышкой по таблице :).
Скрипт подобно предыдущему добавляет функциональности вашим таблицам.Имеет эффекты скрытия столбцов, или рядков.
FancyForm мощный скрипт для замены стандартных чекбоксов (checkbox) добавляет удобство и красоту вашим формам.Легка в использовании, поддерживается всеми браузерами.
Starbox позволяет легко орагинозовать любой вид рейтинга(голосования) при этом используется всего одно PNG изображение. Скрипт основан на Prototype javascript фреймворке. Для некоторых дополнительных эффектов можете добавить Scriptaculous библиотеку. На сайте подробно изложены варианты внедрения и кастомизации скрипта.
Продолжая внедрять ненавязчивые решения, CSSG рады представить SearchField. Этот скрипт помогает расширить возможности стандартной поисковой формы и работает без дополнительных JavaScript библиотек или правок. Работает с событиями onfocus и onblur событиями и выводит авто дополнение вашего запроса.
Этот инструмент предлагает выбрать вам отрезок времени на временной шкале. Перетягивая ползунок вы увидите как меняется дата в формах.
Prototype UI. Карусель-галерея, удобно будет в ней прокручивать большие галереии изображений.
Небольшая и простая php/javascript онлайн фото-галерея, использует AJAX , для работы не требует никаких баз данных или установки дополнительных скриптов, позволяет создать полноценную галерею за пару минут.
Временная шкала это скрипт основанный на DHTML и AJAX для для визуализации событий связанных с датами. Посмотрите демо для того что бы понять в каких целях можно применять данный скрипт. Изменяйте данные перетягивая шкалу по горизонтали.
Скрипт служит для отображения исходного кода при помощи AJAX, так же добавляет нумерацию строк.
mooSlideBox v3 маленькая и простая замена “lightbox” .Работает в браузерах IE 6/7, Opera and Firefox.
Accessible News Slider это JavaScript плагин для jQuery. Служит для прокрутки новостей в блоке, новости можно подгружать динамически.
(Dynamic Unobtrusive Javascript Progress/Percentage Bar)
jsProgressBarHandler это ява скрипт библиотека которая служит для создания и управления стильными прогресс барами.
Стильная бегущая строка с дополнительным рядом возможностей
Небольшой виджет который занимает минимум места и при развороте даёт возможность добавить новость в большое количество социальных сетей.
Скрипт реагирует на отметку чекбокса и в попап окне позволяет выводить какие то данные отработанные на сервере, что бы понять смотрим демо.
Демо:
Плагин для jQuery использующий Canvas/VML для создания закруглённых краёв
Lightview был создан для изменения представления информации пользователям. Работает во всех современных браузерах, идеальное решение для показа изображений.
Другой скрипт для организации онлайн галерей или лайтбоксов на вашем сайте. Поддерживает 5 разных типов медиа: хтмл страницы, обычный строковый контент, медиа (видео, SWF, и т.д), изображения, показ других веб сайтов
Удобный виджет который использует библиотеки Prototype и Scriptaculous. Отличная кастомизация формы в которые необходимо вводить даты.
ModalBox это JavaScript техника для создания современных диалоговых окон без использования всплывающих окон и без перезагрузки страницы.
Скрипт гармошки имеет как горизонтальную так и вертикальную вариации.
Удобный скрипт для пролистывания фотографий.
13 "свежих" решений по созданию JavaScript+CSS- меню навигации.
Комментариев нет:
Отправить комментарий