Подборка небольших и полезных библиотек JavaScript

Итак, сегодня у нас небольшая подборка полезных (на мой взгляд) JS скриптов и плагинов, которые могут вам пригодится при работе. Мне, например, уже пригодились несколько раз.

В статье мы рассмотрим следующие скрипты: смена favicon.ico (уведомления а-ля Gmail), конвертер валют, обработчик изменений hash документа, скрипты для форматирования дат, чисел и денежных величин, скрипт для фильтрации, сортировки и поиска по элементам списка, скрипт для автоматической подстановки вендорных префиксов в CSS, генератор шумовых фонов и кое-что еще.

Интерфейсные гайдеры с помощью jQuery

В этой статье я хочу рассмотреть очень полезный плагин для jQuery — jQuery Guiders. Он позволяет удобным способом создавать интерактивные руководства для веб-интерфейсов, которые помогают пользователям быстрее разобраться с новым для них продуктом или его частью.

Те из вас, кто пользуется Gmail, не раз замечали подобный прием: при появлении какой-то новой кнопки или раздела в почте от Гугла, около нее появляется такое окошко со стрелочкой, кратко объясняющее ее назначение. Рассматриваемый плагин позволяет создавать как отдельные такие окошки, так и их цепочки — благодаря этому вы можете показать пользователю все нужные вам элементы.

Lazyload: отложенная загрузка изображений, скриптов и контента (бесконечный скролл)

В разделе вопрос-ответ часто спрашивают, как на Временно.нет реализована подгрузка изображений.

Если вы не обратили внимание, то изображения загружаются только когда оказываются в видимой области страницы.

Это техника называется «ленивая загрузка» (lazy loading). В статье я затрону не только ленивую загрузку картинок, но и скриптов, стилей и контента.

HTML5 Canvas: первое знакомство

Сегодня я хотел бы начать рассмотрение HTML5 canvas — встроенной возможности современных браузеров для работы с растровой графикой.

С помощью данной технологии можно рисовать различные вещи, начиная от простых геометрических фигур и заканчивая сложными композициями, взаимодействующими с пользователем.

В этой статье я расскажу, что такое canvas, как он работает, и покажу как рисовать простые фигуры, менять цвета и стирать нарисованное. 

Mustache — шаблонизатор для JavaScript

Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для разных языков программирования. Его можно использовать и на сервере (PHP, Ruby и т.д.), и на клиенте (Javascript).

Если вы динамически подгружали с сервера блоки HTML-кода, а не структурированные данные только потому, что не хотели дублировать рендеринг на сервере и на клиенте, то Mustache поможет этого избежать.

Объект jQuery Deferred

В новой версии jQuery 1.5 было внесено много изменений, однако, основные изменения коснулись внедрения объекта Deferred() в каждый метод AJAX, а так же возможность создавать объект Deferred() почти для любых функций.

Метод Deferred() позволяет создавать очередность методов, которые выполняются в зависимости от готовности определенных функций, причем как пользовательских, так и встроенных в jQuery.

Объект Deferred() может быть использован как средство для отслеживания завершения других jQuery методов и для создания отсроченных действий, что окажется полезным для выполнения определенных действий на странице в зависимости от успешного выполнения, например, AJAX запроса или методов анимации.

KML в Google Maps API v3

Всем привет!

В прошлый раз мы говорили про полигоны и линии в Google Maps API. В конце я упомянул, что рассмотренный метод имеет существенный недостаток — при большом количестве отрезков (части линии или грани полигона) браузер начинает тормозить.

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

Полигоны и линии в Google Maps API v3

Всем привет!

Сегодня мы посмотрим как рисовать полигоны и линии на картах Google Maps. Полигоны понадобятся в случае, если вам необходимо обвести область или какой-то объект, а линии — чтобы нарисовать путь или что-то подобное.

В этой статье полигоны и линии будут рисоваться с помощью SVG. Их (как и все другие объекты-оверлеи) можно так же отображать с помощью KML, но о нем мы поговорим в одной из следующих статей.

Zoomy — красивое и удобное решение для увеличения картинок

Всем привет!

Сегодня мы рассмотрим плагин Zoomy для jQuery, который позволяет рассматривать мелкие детали на картинках. Я про что-то подобное уже писал несколько лет назад в статье «Лупа на jQuery», но с тех пор прошло много времени, технологии не стоят на месте, да и это решение намного лучше.

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

Айфонные UI-прелести с помощью jQuery: UITableView

Всем привет.

Несколько лет назад, как только мне в руки попал айпод, и я увидел, как там организованы списки песен, мне сразу захотелось реализовать такое же с помощью JavaScript.

Но до вчерашнего дня все не находилось времени.

Суть скрипта в том, что он позволяет заголовку списка «зависать» над содержимым, пока мы его перематываем и не дойдем до следующего заголовка.