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

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

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

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

Notificon

Данные скрипт позволяет менять иконку favicon.ico браузера, как, например, это сделано в Gmail. Работает в браузерах Google Chrome 6+, Firefox 2+ и Opera.

Money.js

jQuery плагин для удобной конвертации валют. Скрипт использует Open Source Exchange Rates API, который в свою очередь использует Google Calculator API («закрытое» API для продуктов Google), обновляя курсы валют каждый час.

URI.js

Библиотека для работы с адресами. Позволяет как создавать урлы, так и получать из них нужные параметры.

jQuery hashchange event plugin

Плагин позволяет отслеживать изменения hash адреса документа (ту его часть, что идет после #). В некоторых браузер для этого есть специальное событие window.onhashchange, но для тех, в которых такой поддержки нет, отследить изменение hash можно только проверяя адрес с определенным интервалом.

Данный плагин реализует этот функционал для всех браузеров. Может пригодится при AJAX навигации или при работает с документами на разных доменах для передачи параметров через hash.

Pretty Date

Небольшой скрипт для приведения дат из формата «2008-01-28T20:24:17Z» в более человеческие, например, «сегодня», «два дня назад» и так далее.

ListJS

Скрипт на чистом JavaScript, позволяющий сортировать и фильтровать содержимое HTML списков.

Accounting.js

Небольшой скрипт, позволяющий форматировать числа и денежные величины.

Prefix Free

Это скрипт избавляет вас от необходимости писать одно и то же CSS свойство, но с разными префиксами. Например, вместо того, чтобы писать border-radius с префиксами -webkit, -moz и -o-, можно написать просто border-radius и подключить данный скрипт, который при необходимости добавить префиксы за вас.

Работает в браузерах IE9+, Firefox 3.5+, Opera 10+, Safari 4+ и Chrome.

Kibo

Небольшая удобная JavaScript библиотека для работы с клавиатурными событиями. Крайне полезна, рекомендую.

Noise Generator

Мой скрипт, позволяющий создавать шум на DOM элементах, залитых цветом. То есть если вам нужен серый фон body с небольшим шумом, не спешите лезть в Photoshop, используйте следующий скрипт.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 22

Андрей Гурылёв
Отличная подборка. Мелочи, но временами очень нужные. Я из всего этого прежде видел только prefix free.
На счёт вашего скрипта (а мне нередко нужен шумовой фон):
1. Что-то с кодировкой на странице или это у меня что-то с браузером? Внутри кода кодировка комментариев сбита. В общем-то и так понятно, какая строка что делает, но комментарии всё-таки не просто так пишутся =)
2. А зачем в проверке наличия контекста тройное отрицание?
Grin
1. Андрей, у меня все корректно отображается.
2. двойное отрицание сводит значение к boolen, а еще один знак ! делает противоположное утверждение.
Максим
Спасибо за полезные статьи
Роман
Pretty Date - это очень круто. Программисты обычно все через жопу делают даты.
#
Роман
alexei
Grin чтоб перевести в логическое значение, достаточно одного знака отрицание, лучше исправите, примерчик посмотрят другие люди, и начнут говнокодить!
#
alexei
Grin
alexei, вы правы, спасибо. Исправил.
Vera
Очень интересная статья. Удачи вам!
Илюха
Что-то “ваш” скрипт Noise Generator уж больно точно копирует jQuery plugin → http://github.com/DanielRapp/Noisy. Не плагиат ли?
#
Илюха
Grin
Илюха, нет, но ведь при условии, что делают они одно и то же, код будет похож.
Но jQuery Noise умеет хранить результат в Local Storage.
Жека
А по-моему очень похоже. Это подозрительно...
#
Жека
Grin
Жека, кругом заговоры, ужас!
noop
в addNoise я бы сделал так

var canvas = document.createElement('canvas');

if (!canvas.getContext) return false;

во первых, зачем создавать элемент два раза, во вторых, в вашем варианте canvas - глобальная переменная

вам творческих узбеков =)
#
noop
Winstyle
Класс хороший пост. То что нужно и главное рассписано так толково. Продолжайте в том же духе вести пост.
yaffo4ka
зачетная статья!
Иван
"Отличная статья. Полезные библиотеки, попозже про это узнаете" - так сказал на препод в Практикуме http://www.praktikum.com.ua по веб программированию, просмотрев эту статью.
Добавил себе в закладки
#
Иван
Александр
Хорошая подборка нужных и не очень мелочей.
Юрий
Спасибо, взял кой чего на "вооружение"! По поводу Noise Generator - 5 балов, хотя и в ф.шопе это занимает не много времени!
Alex
Спасибо , хорошая подборка кодов.часть возьму на заметку
#
Alex
Виктор
Пригодился скрипт для форматирования дат. Автору большое спасибо!
Shadow
И правда полезные скрипты! Обычно скептически отношусь к подобным подборкам, но тут нашел для себя кое-что новое. Спасибо. :)
Разработчик сайтов
Отличная подборка скриптов. Некоторые, например Notificon, я уже встречал в сети, но вот остальные для меня просто открытие. Так что всем советую примеить необходимые вам скрипты на своем сайте
ruru
http://freshgoldkeys.ru

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
counter strike mt2 silkroad pvp metin2 metin2 pvp knight pvp gm olarak başlayan pvpler pvp silkroad pvp serverler counter strike serverler msn show cam show görüntülü sohbet oyunlar suskunlar gazete oku