Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
Новости
Последние поступления
Книжный магазин
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
    Читать в Яндекс.Ленте



40+ новых и полезных jquery-модулей (с tutorial)

Раздел: Programming / JavaScript @ 27.09.2009 | Ключевые слова: jquery версия для печати

Автор: Sortafreel
Источник: habrahabr

На досуге немного закопался в дебри jquery и на страницах небеизвестного Smashing Magazine нашёл очень любопытную августовсую статейку. Удивлён, что столь полезный материал ещё не появился на Хабре. Исправляю несправедливость своей версией данной статьи.

Удобный модуль динамического поиска

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

Картинки ведут на туториалы.


Модуль фильтруемого портфолио

image
Простой симпатичный модуль, представляющий из себя таблицу мини-картинок (к ним можно привязать что угодно), каждый пункт которой привязан к какому-то пункту в верхнем меню модуля. То бишь, нажимаю я на один из пунктов, всё фильтруется и отображаются только те мини-картинки к которым привязан этот пункт меню.
Лично мне этот модуль очень пригодился, юзаю до сих пор)
Демо
Живой пример

Каруселька «Moving Boxes»

image
Большинство современных каруселей представляют собой простой ряд картинок, двигающихся в определённом направлении. Данный модуль чуть более оригинален — у него появились стрелочки для проскроливания и возможность увеличивать картинки и карусельки, а также его дизайн достаточно симпатичный.
Демо

Модуль объединения картинок с текстом

image
Очень любопытный модуль для объединения картинок, или картинок с текстом. Говоря проще, модуль представляет собой два слоя, в каждый из которых можно внести какую-нить инфу. После внесения, можно достаточно любопытно манипулировать ими:
— по наведении на первый, скрывать его и красивым графическим эффектом показывать второй
— или же сделать вид что под первым слоем что-то спрятано, а при наведении показать весь второй слой, немного опустив первый.
В общем, поиграться есть с чем. Рекомендую.
Демо

Модуль преобразования таблиц в графики

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

Модуль крутых выпадающих менюшек

image
Нужный модуль, позволяющий создавать удобные большие выпадающие менюшки с несколькими подпунктами. Незаменим для инет-магазинов. Судя по комментариеям автора, модуль работает даже под ИЕ 6!)
Демо

Модуль подсветки активного поля формы

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

Модуль динамических опросников

image
Весёлый, удобный, анимированный опросник на jquery. Можно использовать на любых сайтах.
Демо

Простая скролл-каруселька

image
Скролл-каруселька на все случаи жизни. Простенькая, без особых графических изысков и траблов при установке.
Демо
Живой пример

Навороченное меню-сайт

image
Любопытное меню, из которого можно сделать целый сайт. Милые анимационные эффекты и опрятный внешний вид. В общем, мне этот модуль по душе.
Демо
Живой пример

Модуль уведомления о выполнении действия

image
Простейший модуль. При нажатии на кнопку, которая должна активировать какое-то действие, юзер больше не должен гадать — активируется действие или нет. Этот модуль сразу же вводит его в курс дела надписью типа «Действие выполняется». Удобно и несложно. Можно юзать.
Демо

Модуль галереи футболок

image
Любопытная галлерея футболок, представленная в виде таблицы обрезанных фоток футболок. При наведении футболки «расправляют» рукава и выходят на первый план, что выглядит достаточно мило)
Демо
Живой пример

Реалистичный модуль фотогалереи

image
Модуль построен на использовании z-index в цсс. Со стороны выглядит как-будто перед тобой какой-то художник держит кипу своих картин и поочерёдно показывает их. Выглядит более чем симпатично, встраивается просто.
Демо

Модуль привязки фавиконов к внешним ссылкам

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

Модуль ленты-истории аля-Гугл

image
Модуль для создания прокручиваемой ленты событий в гугловском стиле. Есть какой-то текст, какие-то картинки и какие-то года с датами и событиями, которые таскаются мышкой вправо-влево. Любопытно, но практическое применение непонятно.
Демо

Модуль аля-AcrobatReader

image
Модуль, что превращает текст в некое подобие пдфки открытой в AcrobatReader, добавляя слева боковые ссылки, ведущие на заголовки. Почему это нельзя сделать анкорами? Анкоры пишутся ручками, а тут всё генерится само.
Демо

Динамический модуль голосований

image
Удобный модуль голосовалки, учитывающей голоса и обновляющей все данные без перезагрузки страницы. Ничего сверхъественного, но сделано качественно, судя по всему.
Демо

Скролл-список таблиц

image
Список с полосой прокрутки, работающий по механизму «есть див/таблица с контентом, нужно его прокручивать в определённой видимой области». Как список книжек с указанием автора и т.п. — подойдёт.
Демо

Каруселька с мини-зумом

image
Красивая каруселька, основное достоинство которой — уменьшение картинок до нормального размера при наведении (по умолчанию они увеличены). В общем, это надо видеть.
Демо
Живой пример

Динамическое анимированное добавление товара в корзину

image
Товар добавляется в корзину без перезагрузки страницу и с маааленьким анимационным эффектом. Всё просто :)
Демо

Всплывающие окошки закладок аля-Digg

image
С помощью этого модуля можно привязать подобное всплывающее окошко закладок к любой ссылке на вашем сайте. Но можно и не юзать закладки, просто привязать туда какой-нить текст. На ваш вкус.
Демо
Живой пример

Простой mp3-плеер

image
Очень минималистичный, очень нетребовательный к ресурсам и очень быстрый mp3-проигрыватель на сайт.
Демо

Модуль быстрой публикации на Твиттере

image
Всем известная фича на множестве разных блогов — нажал на кнопку, и в твоём твиттере сразу появилась запись с темой, ссылкой и кратким описанием. Удобно. Этот модуль может встроить такую фичу в практически любой блог.
Демо

Навороченный медиа-проигрыватель

image
Первый раз вижу такое на jquery :) Очень симпатичный медиаплеер с настройкой громкости, переключением композиций и т.п.
Демо

Модуль виртуальной клавиатуры

image
Простенькая яваскриптовая английская клавиатура, которую, впрочем, достаточно несложно перефигачить под русский алфавит. По крайней мере, можно попробовать)
Демо

Модуль расширения функционала кнопок rss-рассылки

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

Модуль динамической подгрузки картинок

image
Модуль позволяет подгружать определённую графику по нажатию на кнопку) То бишь по выполнению определённого действия. Любопытная штука, как для ускорения загрузки страницы так и для всяких извращений, как динамическая перекраска сайта.
Демо

Модуль автоматического ресайза картинок

image
Модуль, который «резинит» определённые картинки на сайте (при уменьшении размера окна, тоже уменьшается). Достаточно удобен на «резиновых» сайтах — можно сделать полную «резину».
Демо
Живой пример

Кнопки аля-Твиттер

image
Всем знакомые Твиттер-кнопки «Фоллоу» и «Анфоллоу». Как применять — хз, разве что в Твиттер-клонах. Но выглядит симпатично.
Демо

Стильные чекбоксы

image
Любопытный модуль, делающий из обычных чекбоксов вебдванольные)
Демо

Навороченный модуль валидации полей формы

image
Очень качественный модуль проверки полей форм с последующими всплывающими уведомлениями. Рекомендую абсолютно всем.
Демо

Модуль объединения картинок с текстом-2

image
Немного более хреновая вариация на тему слоёв. Функционал всё тот же — есть два слоя: один сверху, второй снизу. При наведении первый отъезжает в какую-нить сторону, показывая второй. Подходит для тех кто не разобрался с первым модулем
Демо

Анимированный фон

image
Туториал как сделать кусок фона анимированным. Скрипты дают, объясняют понятно. И выглядит ну ооочень красиво. Это нужно видеть.
Живой пример

Модуль виртуальной клавиатуры-2

image
То же самое что и первая версия, но с гораздо более симпатичным дизайном. Даже в чём-то напоминает маковскую.
Демо

Модуль «Разблокировка Iphone»

image
Красивый, но совершенно бесполезный модуль имитирующий процесс разблокировки айфона.
Демо

Модуль дерева файлов

image
Любопытный модуль, позволяющий создавать у вас на сайте древо файлов, как-будто юзер лазит по вашему серверу или просто в таком виде представлять какие-то архивы. В общем, если потрудиться, то модуль будет полезен.
Демо

Скролл-крутилка с подгрузкой из xml

image
Простой и удобный модуль для интернет-магазина: крутилка товаров с всплывающими краткими описаниями. Товары их краткие описания подгружаются из xmlки.
Демо

Модуль подсвечивания блоков таблицы

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

Модуль панорамных изображений

image
Офигенно красивый модуль, позволяющий делать панорамные шапки, панорамные фоны и т.п. Если кратко — то шапка не статична, а как бы объёмна, если подвигать мышкой, то можно увидить что за краями шапки. Смотрится очень стильно и красиво.
Живой пример

Модуль вызова и обработки нескольких форм одновременно

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

Классическая каруселька

image
Классическая реализация классической карусельки. Картинки плаво плывут в одну сторону, направление можно менять стрелочками. Всё просто.
Демо

Динамическое вертикальное меню со скроллом

image
Меню которое ездит туда-сюда по вертикали и подсвечивает пункты при наведении. Честно говоря, очень даже неплохо. Когда-нибудь поставлю такое у себя.
Демо

Меню с красивым эффектом наведения

image
Очень красивое меню с плавно меняющимся цветом кнопок.
Демо

Модуль «раскраски»

image
Модуль позволяющий димамически «раскрасить» цветами пустой pngшный контур. Реализация: под png снизу, с графическим эффектом, подкладывается полноцветная картинка. выглядит симпатично.
Демо

Вот, собственно, и всё. В оригинале, правда, было 50 модулей, но на некоторых не работали ссылки, а некоторые мне абсолютно не понравились.

Финита ля комедиа. Ваш Sortafreel.

Это интересно:








версия для печатиРаспечатать статью


Вернуться в раздел: Programming / JavaScript


Реклама:
Читать наc на:

Add to Google
Читать в Яндекс.Ленте






Rambler's Top100
© Copyright 1998-2012 Александр Томов. All rights reserved.