2496 читателей, 137 постов
Администрация
Модераторы
Все прелести уникальной JS/AJAX библиотеки Jquery
40+ новых и полезных jquery-модулей (с tutorial)
На досуге немного закопался в дебри jquery и на страницах небеизвестного Smashing Magazine нашёл очень любопытную августовсую статейку. Удивлён, что столь полезный материал ещё не появился на Хабре. Исправляю несправедливость своей версией данной статьи.
Удобный модуль динамического поиска
Крутой модуль, расширяющий возможности вашего поиска по сайту. Теперь, когда вводится запрос, снизу строки поиска сразу всплывает иллюстрированный список всего, что под эти запросы подходит. Выглядит бомбезно и явно очень удобно.
— Демо
— Живой пример
!!! Картинки ведут на туториалы !!!
=
Модуль фильтруемого портфолио
Простой симпатичный модуль, представляющий из себя таблицу мини-картинок (к ним можно привязать что угодно), каждый пункт которой привязан к какому-то пункту в верхнем меню модуля. То бишь, нажимаю я на один из пунктов, всё фильтруется и отображаются только те мини-картинки к которым привязан этот пункт меню.
Лично мне этот модуль очень пригодился, юзаю до сих пор)
— Демо
— Живой пример
Каруселька «Moving Boxes»
Большинство современных каруселей представляют собой простой ряд картинок, двигающихся в определённом направлении. Данный модуль чуть более оригинален — у него появились стрелочки для проскроливания и возможность увеличивать картинки и карусельки, а также его дизайн достаточно симпатичный.
— Демо
Модуль объединения картинок с текстом
Очень любопытный модуль для объединения картинок, или картинок с текстом. Говоря проще, модуль представляет собой два слоя, в каждый из которых можно внести какую-нить инфу. После внесения, можно достаточно любопытно манипулировать ими:
— по наведении на первый, скрывать его и красивым графическим эффектом показывать второй
— или же сделать вид что под первым слоем что-то спрятано, а при наведении показать весь второй слой, немного опустив первый.
В общем, поиграться есть с чем. Рекомендую.
— Демо
Модуль преобразования таблиц в графики
Более чем любопытный модуль, позволяющий отображать и даже редактировать содержимое html-таблиц в виде всяких графиков. Достаточно полезен, при правильном использовании.
— Демо
Модуль крутых выпадающих менюшек
Нужный модуль, позволяющий создавать удобные большие выпадающие менюшки с несколькими подпунктами. Незаменим для инет-магазинов. Судя по комментариеям автора, модуль работает даже под ИЕ 6!)
— Демо
Модуль подсветки активного поля формы
Простой и понятный модуль — то поле в форме, которое заполняется юзером, подсвечивается неярким светом, чтобы юзер не терялся. Приятный аксессуар для любой формы.
— Демо
Модуль динамических опросников
Весёлый, удобный, анимированный опросник на jquery. Можно использовать на любых сайтах.
— Демо
Простая скролл-каруселька
Скролл-каруселька на все случаи жизни. Простенькая, без особых графических изысков и траблов при установке.
— Демо
— Живой пример
Навороченное меню-сайт
Любопытное меню, из которого можно сделать целый сайт. Милые анимационные эффекты и опрятный внешний вид. В общем, мне этот модуль по душе.
— Демо
— Живой пример
Модуль уведомления о выполнении действия
Простейший модуль. При нажатии на кнопку, которая должна активировать какое-то действие, юзер больше не должен гадать — активируется действие или нет. Этот модуль сразу же вводит его в курс дела надписью типа «Действие выполняется». Удобно и несложно. Можно юзать.
— Демо
Модуль галереи футболок
Любопытная галлерея футболок, представленная в виде таблицы обрезанных фоток футболок. При наведении футболки «расправляют» рукава и выходят на первый план, что выглядит достаточно мило)
— Демо
— Живой пример
Реалистичный модуль фотогалереи
Модуль построен на использовании z-index в цсс. Со стороны выглядит как-будто перед тобой какой-то художник держит кипу своих картин и поочерёдно показывает их. Выглядит более чем симпатично, встраивается просто.
— Демо
Модуль привязки фавиконов к внешним ссылкам
Скрина нет, потому что блог создателя этого модуля лежит. Но скрипт модуля можно найти здесь.
Сам модуль достаточно полезен — он мониторит каждую внешнюю ссылку сайта и привязывает к ней фавикон того сайта. Ничего сложного, но сайт оживляет явно.
Модуль ленты-истории аля-Гугл
Модуль для создания прокручиваемой ленты событий в гугловском стиле. Есть какой-то текст, какие-то картинки и какие-то года с датами и событиями, которые таскаются мышкой вправо-влево. Любопытно, но практическое применение непонятно.
— Демо
Модуль аля-AcrobatReader
Модуль, что превращает текст в некое подобие пдфки открытой в AcrobatReader, добавляя слева боковые ссылки, ведущие на заголовки. Почему это нельзя сделать анкорами? Анкоры пишутся ручками, а тут всё генерится само.
— Демо
Динамический модуль голосований
Удобный модуль голосовалки, учитывающей голоса и обновляющей все данные без перезагрузки страницы. Ничего сверхъественного, но сделано качественно, судя по всему.
— Демо
Скролл-список таблиц
Список с полосой прокрутки, работающий по механизму «есть див/таблица с контентом, нужно его прокручивать в определённой видимой области». Как список книжек с указанием автора и т.п. — подойдёт.
— Демо
Каруселька с мини-зумом
Красивая каруселька, основное достоинство которой — уменьшение картинок до нормального размера при наведении (по умолчанию они увеличены). В общем, это надо видеть.
— Демо
— Живой пример
Динамическое анимированное добавление товара в корзину
Товар добавляется в корзину без перезагрузки страницу и с маааленьким анимационным эффектом. Всё просто :)
— Демо
Всплывающие окошки закладок аля-Digg
С помощью этого модуля можно привязать подобное всплывающее окошко закладок к любой ссылке на вашем сайте. Но можно и не юзать закладки, просто привязать туда какой-нить текст. На ваш вкус.
— Демо
— Живой пример
Простой mp3-плеер
Очень минималистичный, очень нетребовательный к ресурсам и очень быстрый mp3-проигрыватель на сайт.
— Демо
Модуль быстрой публикации на Твиттере
Всем известная фича на множестве разных блогов — нажал на кнопку, и в твоём твиттере сразу появилась запись с темой, ссылкой и кратким описанием. Удобно. Этот модуль может встроить такую фичу в практически любой блог.
— Демо
Навороченный медиа-проигрыватель
Первый раз вижу такое на jquery :) Очень симпатичный медиаплеер с настройкой громкости, переключением композиций и т.п.
— Демо
Модуль виртуальной клавиатуры
Простенькая яваскриптовая английская клавиатура, которую, впрочем, достаточно несложно перефигачить под русский алфавит. По крайней мере, можно попробовать)
— Демо
Модуль расширения функционала кнопок rss-рассылки
Модуль позволяет всячески играться с дизайном кнопки (есть несколько симпатичных готовых тем), а также подвешивать на одну кнопку неограниченное количество рассылок, весь список которых будет отображаться при нажатии на неё.
— Демо
Модуль динамической подгрузки картинок
Модуль позволяет подгружать определённую графику по нажатию на кнопку) То бишь по выполнению определённого действия. Любопытная штука, как для ускорения загрузки страницы так и для всяких извращений, как динамическая перекраска сайта.
— Демо
Модуль автоматического ресайза картинок
Модуль, который «резинит» определённые картинки на сайте (при уменьшении размера окна, тоже уменьшается). Достаточно удобен на «резиновых» сайтах — можно сделать полную «резину».
— Демо
— Живой пример
Кнопки аля-Твиттер
Всем знакомые Твиттер-кнопки «Фоллоу» и «Анфоллоу». Как применять — хз, разве что в Твиттер-клонах. Но выглядит симпатично.
— Демо
Стильные чекбоксы
Любопытный модуль, делающий из обычных чекбоксов вебдванольные)
— Демо
Навороченный модуль валидации полей формы
Очень качественный модуль проверки полей форм с последующими всплывающими уведомлениями. Рекомендую абсолютно всем.
— Демо
Модуль объединения картинок с текстом-2
Немного более хреновая вариация на тему слоёв. Функционал всё тот же — есть два слоя: один сверху, второй снизу. При наведении первый отъезжает в какую-нить сторону, показывая второй. Подходит для тех кто не разобрался с первым модулем
— Демо
Анимированный фон
Туториал как сделать кусок фона анимированным. Скрипты дают, объясняют понятно. И выглядит ну ооочень красиво. Это нужно видеть.
— Живой пример
Модуль виртуальной клавиатуры-2
То же самое что и первая версия, но с гораздо более симпатичным дизайном. Даже в чём-то напоминает маковскую.
— Демо
Модуль «Разблокировка Iphone»
Красивый, но совершенно бесполезный модуль имитирующий процесс разблокировки айфона.
— Демо
Модуль дерева файлов
Любопытный модуль, позволяющий создавать у вас на сайте древо файлов, как-будто юзер лазит по вашему серверу или просто в таком виде представлять какие-то архивы. В общем, если потрудиться, то модуль будет полезен.
— Демо
Скролл-крутилка с подгрузкой из xml
Простой и удобный модуль для интернет-магазина: крутилка товаров с всплывающими краткими описаниями. Товары их краткие описания подгружаются из xmlки.
— Демо
Модуль подсвечивания блоков таблицы
Модуль для таблиц, который графически выделяет выбранные столбцы. Достаточно симпатичный дизайн, можно применять для продажи разных хостинг-пакетов и т.п.
— Демо
— Живой пример
Модуль панорамных изображений
Офигенно красивый модуль, позволяющий делать панорамные шапки, панорамные фоны и т.п. Если кратко — то шапка не статична, а как бы объёмна, если подвигать мышкой, то можно увидить что за краями шапки. Смотрится очень стильно и красиво.
— Живой пример
Модуль вызова и обработки нескольких форм одновременно
Модуль позволяет одновременно вызвать любое количество форм и обрабатывать их в любом порядке без перезагрузки страницы. Полезно при использовании для комментариев или вопросов.
— Демо
Классическая каруселька
Классическая реализация классической карусельки. Картинки плаво плывут в одну сторону, направление можно менять стрелочками. Всё просто.
— Демо
Динамическое вертикальное меню со скроллом
Меню которое ездит туда-сюда по вертикали и подсвечивает пункты при наведении. Честно говоря, очень даже неплохо. Когда-нибудь поставлю такое у себя.
— Демо
Меню с красивым эффектом наведения
Очень красивое меню с плавно меняющимся цветом кнопок.
— Демо
Модуль «раскраски»
Модуль позволяющий димамически «раскрасить» цветами пустой pngшный контур. Реализация: под png снизу, с графическим эффектом, подкладывается полноцветная картинка. выглядит симпатично.
— Демо
Вот, собственно, и всё. В оригинале, правда, было 50 модулей, но на некоторых не работали ссылки, а некоторые мне абсолютно не понравились.
Финита ля комедиа. Ваш Sortafreel.
— Мой новый сайт — TypeLebedev.ru
Удобный модуль динамического поиска
Крутой модуль, расширяющий возможности вашего поиска по сайту. Теперь, когда вводится запрос, снизу строки поиска сразу всплывает иллюстрированный список всего, что под эти запросы подходит. Выглядит бомбезно и явно очень удобно.
— Демо
— Живой пример
!!! Картинки ведут на туториалы !!!
=
Модуль фильтруемого портфолио
Простой симпатичный модуль, представляющий из себя таблицу мини-картинок (к ним можно привязать что угодно), каждый пункт которой привязан к какому-то пункту в верхнем меню модуля. То бишь, нажимаю я на один из пунктов, всё фильтруется и отображаются только те мини-картинки к которым привязан этот пункт меню.
Лично мне этот модуль очень пригодился, юзаю до сих пор)
— Демо
— Живой пример
Каруселька «Moving Boxes»
Большинство современных каруселей представляют собой простой ряд картинок, двигающихся в определённом направлении. Данный модуль чуть более оригинален — у него появились стрелочки для проскроливания и возможность увеличивать картинки и карусельки, а также его дизайн достаточно симпатичный.
— Демо
Модуль объединения картинок с текстом
Очень любопытный модуль для объединения картинок, или картинок с текстом. Говоря проще, модуль представляет собой два слоя, в каждый из которых можно внести какую-нить инфу. После внесения, можно достаточно любопытно манипулировать ими:
— по наведении на первый, скрывать его и красивым графическим эффектом показывать второй
— или же сделать вид что под первым слоем что-то спрятано, а при наведении показать весь второй слой, немного опустив первый.
В общем, поиграться есть с чем. Рекомендую.
— Демо
Модуль преобразования таблиц в графики
Более чем любопытный модуль, позволяющий отображать и даже редактировать содержимое html-таблиц в виде всяких графиков. Достаточно полезен, при правильном использовании.
— Демо
Модуль крутых выпадающих менюшек
Нужный модуль, позволяющий создавать удобные большие выпадающие менюшки с несколькими подпунктами. Незаменим для инет-магазинов. Судя по комментариеям автора, модуль работает даже под ИЕ 6!)
— Демо
Модуль подсветки активного поля формы
Простой и понятный модуль — то поле в форме, которое заполняется юзером, подсвечивается неярким светом, чтобы юзер не терялся. Приятный аксессуар для любой формы.
— Демо
Модуль динамических опросников
Весёлый, удобный, анимированный опросник на jquery. Можно использовать на любых сайтах.
— Демо
Простая скролл-каруселька
Скролл-каруселька на все случаи жизни. Простенькая, без особых графических изысков и траблов при установке.
— Демо
— Живой пример
Навороченное меню-сайт
Любопытное меню, из которого можно сделать целый сайт. Милые анимационные эффекты и опрятный внешний вид. В общем, мне этот модуль по душе.
— Демо
— Живой пример
Модуль уведомления о выполнении действия
Простейший модуль. При нажатии на кнопку, которая должна активировать какое-то действие, юзер больше не должен гадать — активируется действие или нет. Этот модуль сразу же вводит его в курс дела надписью типа «Действие выполняется». Удобно и несложно. Можно юзать.
— Демо
Модуль галереи футболок
Любопытная галлерея футболок, представленная в виде таблицы обрезанных фоток футболок. При наведении футболки «расправляют» рукава и выходят на первый план, что выглядит достаточно мило)
— Демо
— Живой пример
Реалистичный модуль фотогалереи
Модуль построен на использовании z-index в цсс. Со стороны выглядит как-будто перед тобой какой-то художник держит кипу своих картин и поочерёдно показывает их. Выглядит более чем симпатично, встраивается просто.
— Демо
Модуль привязки фавиконов к внешним ссылкам
Скрина нет, потому что блог создателя этого модуля лежит. Но скрипт модуля можно найти здесь.
Сам модуль достаточно полезен — он мониторит каждую внешнюю ссылку сайта и привязывает к ней фавикон того сайта. Ничего сложного, но сайт оживляет явно.
Модуль ленты-истории аля-Гугл
Модуль для создания прокручиваемой ленты событий в гугловском стиле. Есть какой-то текст, какие-то картинки и какие-то года с датами и событиями, которые таскаются мышкой вправо-влево. Любопытно, но практическое применение непонятно.
— Демо
Модуль аля-AcrobatReader
Модуль, что превращает текст в некое подобие пдфки открытой в AcrobatReader, добавляя слева боковые ссылки, ведущие на заголовки. Почему это нельзя сделать анкорами? Анкоры пишутся ручками, а тут всё генерится само.
— Демо
Динамический модуль голосований
Удобный модуль голосовалки, учитывающей голоса и обновляющей все данные без перезагрузки страницы. Ничего сверхъественного, но сделано качественно, судя по всему.
— Демо
Скролл-список таблиц
Список с полосой прокрутки, работающий по механизму «есть див/таблица с контентом, нужно его прокручивать в определённой видимой области». Как список книжек с указанием автора и т.п. — подойдёт.
— Демо
Каруселька с мини-зумом
Красивая каруселька, основное достоинство которой — уменьшение картинок до нормального размера при наведении (по умолчанию они увеличены). В общем, это надо видеть.
— Демо
— Живой пример
Динамическое анимированное добавление товара в корзину
Товар добавляется в корзину без перезагрузки страницу и с маааленьким анимационным эффектом. Всё просто :)
— Демо
Всплывающие окошки закладок аля-Digg
С помощью этого модуля можно привязать подобное всплывающее окошко закладок к любой ссылке на вашем сайте. Но можно и не юзать закладки, просто привязать туда какой-нить текст. На ваш вкус.
— Демо
— Живой пример
Простой mp3-плеер
Очень минималистичный, очень нетребовательный к ресурсам и очень быстрый mp3-проигрыватель на сайт.
— Демо
Модуль быстрой публикации на Твиттере
Всем известная фича на множестве разных блогов — нажал на кнопку, и в твоём твиттере сразу появилась запись с темой, ссылкой и кратким описанием. Удобно. Этот модуль может встроить такую фичу в практически любой блог.
— Демо
Навороченный медиа-проигрыватель
Первый раз вижу такое на jquery :) Очень симпатичный медиаплеер с настройкой громкости, переключением композиций и т.п.
— Демо
Модуль виртуальной клавиатуры
Простенькая яваскриптовая английская клавиатура, которую, впрочем, достаточно несложно перефигачить под русский алфавит. По крайней мере, можно попробовать)
— Демо
Модуль расширения функционала кнопок rss-рассылки
Модуль позволяет всячески играться с дизайном кнопки (есть несколько симпатичных готовых тем), а также подвешивать на одну кнопку неограниченное количество рассылок, весь список которых будет отображаться при нажатии на неё.
— Демо
Модуль динамической подгрузки картинок
Модуль позволяет подгружать определённую графику по нажатию на кнопку) То бишь по выполнению определённого действия. Любопытная штука, как для ускорения загрузки страницы так и для всяких извращений, как динамическая перекраска сайта.
— Демо
Модуль автоматического ресайза картинок
Модуль, который «резинит» определённые картинки на сайте (при уменьшении размера окна, тоже уменьшается). Достаточно удобен на «резиновых» сайтах — можно сделать полную «резину».
— Демо
— Живой пример
Кнопки аля-Твиттер
Всем знакомые Твиттер-кнопки «Фоллоу» и «Анфоллоу». Как применять — хз, разве что в Твиттер-клонах. Но выглядит симпатично.
— Демо
Стильные чекбоксы
Любопытный модуль, делающий из обычных чекбоксов вебдванольные)
— Демо
Навороченный модуль валидации полей формы
Очень качественный модуль проверки полей форм с последующими всплывающими уведомлениями. Рекомендую абсолютно всем.
— Демо
Модуль объединения картинок с текстом-2
Немного более хреновая вариация на тему слоёв. Функционал всё тот же — есть два слоя: один сверху, второй снизу. При наведении первый отъезжает в какую-нить сторону, показывая второй. Подходит для тех кто не разобрался с первым модулем
— Демо
Анимированный фон
Туториал как сделать кусок фона анимированным. Скрипты дают, объясняют понятно. И выглядит ну ооочень красиво. Это нужно видеть.
— Живой пример
Модуль виртуальной клавиатуры-2
То же самое что и первая версия, но с гораздо более симпатичным дизайном. Даже в чём-то напоминает маковскую.
— Демо
Модуль «Разблокировка Iphone»
Красивый, но совершенно бесполезный модуль имитирующий процесс разблокировки айфона.
— Демо
Модуль дерева файлов
Любопытный модуль, позволяющий создавать у вас на сайте древо файлов, как-будто юзер лазит по вашему серверу или просто в таком виде представлять какие-то архивы. В общем, если потрудиться, то модуль будет полезен.
— Демо
Скролл-крутилка с подгрузкой из xml
Простой и удобный модуль для интернет-магазина: крутилка товаров с всплывающими краткими описаниями. Товары их краткие описания подгружаются из xmlки.
— Демо
Модуль подсвечивания блоков таблицы
Модуль для таблиц, который графически выделяет выбранные столбцы. Достаточно симпатичный дизайн, можно применять для продажи разных хостинг-пакетов и т.п.
— Демо
— Живой пример
Модуль панорамных изображений
Офигенно красивый модуль, позволяющий делать панорамные шапки, панорамные фоны и т.п. Если кратко — то шапка не статична, а как бы объёмна, если подвигать мышкой, то можно увидить что за краями шапки. Смотрится очень стильно и красиво.
— Живой пример
Модуль вызова и обработки нескольких форм одновременно
Модуль позволяет одновременно вызвать любое количество форм и обрабатывать их в любом порядке без перезагрузки страницы. Полезно при использовании для комментариев или вопросов.
— Демо
Классическая каруселька
Классическая реализация классической карусельки. Картинки плаво плывут в одну сторону, направление можно менять стрелочками. Всё просто.
— Демо
Динамическое вертикальное меню со скроллом
Меню которое ездит туда-сюда по вертикали и подсвечивает пункты при наведении. Честно говоря, очень даже неплохо. Когда-нибудь поставлю такое у себя.
— Демо
Меню с красивым эффектом наведения
Очень красивое меню с плавно меняющимся цветом кнопок.
— Демо
Модуль «раскраски»
Модуль позволяющий димамически «раскрасить» цветами пустой pngшный контур. Реализация: под png снизу, с графическим эффектом, подкладывается полноцветная картинка. выглядит симпатично.
— Демо
Вот, собственно, и всё. В оригинале, правда, было 50 модулей, но на некоторых не работали ссылки, а некоторые мне абсолютно не понравились.
Финита ля комедиа. Ваш Sortafreel.
— Мой новый сайт — TypeLebedev.ru
комментарии (66)
Не знаю, чем кому не нравится imageshack.
в целом неплохо. спасибо!
автору респект
Но теперь все будет в одной!
Спасибо!
Действительно очень удобно
Дак ясно дело, там на аватарках индусы. Делать нечего было, вот и написали
Настроек очень много.
Лицензия MIT.
Поддерживается загрузка контента из страницы, через ajax, через iframe
Спасибо за подборку.
(http://nettuts.s3.amazonaws.com/378_jqueryKeyboard/demo/index.html)
Если ввести что-то в поле ввода с обычной клавиатуры, то последующие клики по виртуальной ничего не дают.
Напоминаю — туториалы на все модули находятся по клику на картинку)
<Маленькая ложка дегтя>
Зачем любое симпатичное использование библиотеки называть модулем?
К примеру «футболки» — маусОвер + маусАут + анимация, 6 строк кода!
</Маленькая ложка дегтя>
Если он расширяет базовый функционал через extend — значит он уже есть плагином. Если добавляет хотя-бы строчку в дом — его можно называть модулем. Хотя это — условности. Надо же как-то называть)
Некоторые плагины вдохновляют, так и хочется сделать какой-нибудь сайт чтобы их применить :)
По идее это должно сэкономить количество кликов и помочь быстро понять что есть в разделе. (На практике пока такого не встречал).
(?)
Кричать, Байан! уже не камильфо xD
благодарен за помощь заранее, спасибо, всем здоровья счастья и долгих лет жизни, прости меня за все!!!
для тех кому jquery не в новинку — 90% плагинов устарело остальные 10% не универсальны.
Плагины надо было разделить по функционалу, а то каша какая-то получилась.
Удобный модуль динамического поиска
Модуль объединения картинок с текстом
Модуль преобразования таблиц в графики
Каруселька с мини-зумом
Модуль дерева файлов
остальные помоему так себе…