Подборка плагинов к jQuery / jQuery / Хабрахабр

Подборка плагинов к jQuery

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

jReject — jQuery Browser Rejection

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

(mb)ConteinersPlus

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

Barcode

Этот плагин позволяет создавать штрих-код (CSS, BMP и SVG).
Совместим со всеми браузерами, но в IE работает только CSS.

CountDown

Все просто: таймер обратного отсчета с гибкой настройкой внешнего вида.

Sliced Image Slider

Sliced Image Slider — это плагин, который представляет собой навигатор между картинками. Его особенность: анимация при переходе от изображения к изображению «режет» картинку на части и двигает каждую по отдельности, как видно на рисунке. Количество таких «частей» можно задать в коде, как и направление движения.

Panel Gallery

Еще один плагин-галерея. Картинки режутся на части и каждая часть следующей картинки плавно появляется на экране. Можно задавать направление появление этих частей, задержки перед появлением следующей части или фотографии, а так же задать смену картинок «по кругу», без остановки.

jQuery Cumulus Tags

Плагин для создания облаков тэгов. Внешний вид настраивается в коде (размеры облака, размеры шрифтов и т. п.)

Slideshow Lite

«Легковесная» галерея изображений. Минимум функционала.

jFEF — Javascript Flash Embeded Font

jQuery-плагин для упрощения интеграции с jFEF.

MapBox

Этот плагин позволяет создать интерактивную карту с возможностью масштабирования и поддержкой слоев.

PicNet JQuery Table Filter

Плагин добавляет строку к таблице с полями, где можно задавать фильтры данных таблицы, которые будут применены сразу же после выбора (или ввода).

FullCalendar

Полноразмерный календарь с поддержкой Drag&Drop. Использует AJAX для работы с событиями в реальном времени. Легко настраивается, может быть использован совместно с другими сервисами, например с календарем Google (для него даже есть дополнение).

Embed Picasa Gallery

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

jOmino

Плагин, который позволяет использовать анимированное появление или скрытие html-элементов на вашей странице в стиле «домино»

jQuery Watermark

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

jQuery Image Overlay

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

maxChar

Сообщение «N символов осталось» для текстовых полей.

Smart Cart

Это плагин для «корзины покупателя». Простой, настраиваемый интерфейс.

jQuery Simple Multi-Select

Этот плагин позволяет выбирать несколько элементов списке одним кликом по каждому, вместо нажатия Ctrl+клик в стандартном варианте.

Zooma

Плагин для увеличения изображений (zoom'a).

FontScaler

Этот плагин позволяет добавить на страницу панель с выбором размера шрифтов.

Да, источник тут.

+80

26 октября 2009, 19:29

327

smsteel

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

комментарии (28)

+10

Ockonal 26 октября 2009, 19:40 #

Обожаю такие топики :)

Napolsky 27 октября 2009, 00:56 # ↑

копипаст-агреагатор в стиле smashinmagazin? :)

ivan_suroegin 26 октября 2009, 19:59 #

Благодарю! Три плагина себе взял для как раз проектируемого проекта. :)
В закладки.

loat 26 октября 2009, 22:02 #

Очень понравился jQuery Cumulus Tags, хорошее решение.

spe 26 октября 2009, 22:37 #

Спасибо за наводку на Embed Picasa Gallery!

spe 26 октября 2009, 23:25 #

Перенесите, пожалуйста, в блог jQuery

–2

Omgovich 26 октября 2009, 23:45 #

Не знаю где картинки, но точно не в этом топике.

А за подборку спасибо — пригодится.

robotv 26 октября 2009, 23:49 #

Кое-что из этого приходилось самому писать. Но тут вроде фич побольше.

man_without_face 27 октября 2009, 00:22 #

Ребят, а кто-нибудь вообще с точки зрения пользователя, использовал облако тегов? На мой взгляд (могу ошибаться) бесполезная штука. Ну разве что пустую область забить чем-то.

spe 27 октября 2009, 00:28 # ↑

Да, я для поиска иногда использую, когда смутно представляю что ищу, или не знаю, как сформулировать запрос

man_without_face 27 октября 2009, 00:30 # ↑

как я понимаю, помогает. интересно…

waitekk 27 октября 2009, 06:29 # ↑

когда по чужим блогам шаришься, то бывает, не хочется читать о фрилансе и всяком личном. нажал «HTML+CSS» и получил, что хотел. удобно

Mr_Floppy 27 октября 2009, 01:29 #

>Плагин для увеличения изображений (zoom'a).
Поубивал бы за такое. Всякие фирмы типа Sony, да и некоторые инет-магазины взяли за моду использовать эти зумы — жутко неудобно смотреть на мониторе картинку как с телефона. Вообще непонятно зачем и кому это нужно, когда гораздо удобнее открыть картинку на весь экран, причем если она не влезает — то все браузеры (включая IE6, ЕМНИП) подгонят ее к окну.

smsteel 27 октября 2009, 01:31 # ↑

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

int20 27 октября 2009, 07:19 # ↑

…и называется это… и называется это… и называется это… JCrop! :)))

RiderSx 27 октября 2009, 07:38 #

Вы мой спаситель! Как же долго я не мог найти нужных плагинов… и все нашлись в Вашей подборке, благодарю!

jandosul 27 октября 2009, 07:54 #

Sliced Image Slider понравился а в следующий раз можно календарики не включать?
В целом спасибо за подборку!

moroz1999 27 октября 2009, 08:32 #

Спасибо за подборку. Всегда просматриваю такие топики в поисках свежих идей для велосипедостроения. Особенно понравился Sliced Image Slider — простая идея, но эффектно выглядит. Жаль только, что скорость отрисовки у браузеров скорее всего не позволит сделать однопиксельную высоту для slices, но это еще предстоит выяснить.

smsteel 27 октября 2009, 08:35 # ↑

Недавно был интересный и полезный пост на эту тему
habrahabr.ru/blogs/jquery/72022/ :)

moroz1999 27 октября 2009, 08:57 # ↑

Спасибо за ссылку, люблю почитать про детали внутренней архитектуры таких мастодонтов, как jQuery. Тем более, что я как-то наталкивался на наглядные онлайн уроки Javascript от John Resig и узнал немало нового для себя.
Да и вообще, в процессе написания своего мини-менеджера эффектов, не раз доводилось заглядывать во внутрь именитых библиотек, чтобы оценить, как их разработчики решили тот или иной сомнительный нюанс.

Richard_Ferlow 27 октября 2009, 09:43 #

MapBox — так по идее начало хорошее у плагина… но как они не думают об удобстве…

Я пытался какой-то модуль для Drag&Drop контента в контейнере скрестить с LazyLoad, дабы получилось по типу гугла(не всю же карту разом грузить)… не особо вышло — глючило.

А этот… интерактив я там так и не понял какой, кликать на объекты вроде нельзя… да и в опере ад просто чего происходит.

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

el777 27 октября 2009, 11:26 #

Классный плагин календаря arshaw.com/fullcalendar/ только работает странно. Видимо еще сырой.
Как посмотреть детальную информацию по событию? При двойном клике на событии, оно «прилипает» к мыши и так и ездит с ней пока не сбосишь. Но после этого календарь перестает работать.
Браузер Google Chromium. Это только у меня так?

smsteel 27 октября 2009, 11:49 # ↑

Попробовал на 3.0.195.27, такого бага не вылезло. Попробовал еще и на ФФ, Опере и IE — тоже никаких проблем.

el777 27 октября 2009, 11:56 # ↑

У меня 4.0.223.6 (Ubuntu build 29510) — глючит. А в фаерфоксе нормально.

nehxby 27 октября 2009, 12:33 #

Плагин jQuery Watermark — со страницы jQuery ссылка на документацию. Перешел, а там глюки типа:

Warning: Cr_Base::require_once(app/controllers/Projectsjq/watermarkController.php) [cr-base.require-once]: failed to open stream: No such file or directory in /home/marioestrada/webapps/mario_ec/app/framework/Cr/Base.php on line 14

Fatal error: Cr_Base::require_once() [function.require]: Failed opening required 'app/controllers/Projectsjq/watermarkController.php' (include_path='app/models/:app/framework/:.:/usr/local/lib/php') in /home/marioestrada/webapps/mario_ec/app/framework/Cr/Base.php on line 14

Не подскажите, какой движок использует Марио?

Ango 27 октября 2009, 14:35 #

та же фигня, ошибка

вот достаточно упрощённый код, что я использую
Назвал так же — watermark

(function($) { $.fn.watermark = function() { this.each(function() { new WatermarkField(this); }); function WatermarkField(input) { var self = this; this.input = input; this.label = $('label[for="' + this.input.id + '"]')[0]; var div = document.createElement('div'); $(div).css({ 'position': 'relative' }); $(this.input).wrap(div); $(this.input.parentNode).append(self.label); $(self.label).css({ 'position': 'absolute', 'z-index': '10', 'left': '3px', 'top': '0px', 'opacity': '0.5' }); $(this.input).bind("change", function() { self.Update() }); $(this.input).bind("blur", function() { self.Update(); }); if ($.browser.opera) { $(this.input).bind("keypress", function() { setTimeout(function() { self.Update() }, 0); }); } else { $(this.input).bind("keydown", function() { setTimeout(function() { self.Update() }, 0); }); } } WatermarkField.prototype.Update = function() { if (this.input.value != "") { $(this.label).css({ 'visibility': 'hidden' }); } else if (this.input.value == "") { $(this.label).css({ 'visibility': 'visible' }); } } } })(jQuery); * This source code was highlighted with Source Code Highlighter.

использование обычно: есть инпут с опред. классом и с лейблами

$(function() { $('.watermark').watermark(); });

deniamnet 27 октября 2009, 17:43 #

взял несколько интересных плагинов, спасибо

ArCH 28 октября 2009, 01:17 #

Огромное спасибо за Календарь! Супер плаг, и как раз очень нужен был!

jQuery