Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Най-добрите jQuery плъгини за 2012 1

Сподели урока

Годината е към своя край, затова реших да подбера най-добрите (според мен) jQuery плъгини за 2012 в една кратка колекция. Ще откриеш голямо разнообразие от плъгини. Някои ще ти помогнат да създадеш т.нар. адаптивен лейаут (layout). Други ще те улеснят в създаването на страхотни слайдшоу галерии, а трети пък, ще добавят различни ефекти в сайта ти. Заслужава си да ги разгледаш.

Лейаут / Layout

Equilize.js

Доста полезен плъгин за изравняване на височината или ширината на група елементи.

Equilize.js

Линк

Freetile.js

Плъгин за подреждане на съдържанието в динамичен, ефикасен и гъвкав лейаут. Може да бъде приложен към контейнер, което ще накара вместените в него елементи да заемат свободното място по максимално сбит начин.

Freetile.js

Линк

Gridster.js

Създаване на интуитивен, мулти-колонен лейаут, чиито елементи могат да бъдат пренареждани чрез drag-and-drop.

Gridster.js

Линк

Woomark

Създаване на гъвкав, мулти-колонен лейаут. Този плъгин засича ширината на прозореца и автоматично организира съдържанието в колони създавайки мрежа от елементи.

Woomark

Линк

Навигация

HorizontalNav

Хоризонтално меню, което обхваща цялата ширина на родителския елемент.

HorizontalNav

Линк

StickyMojo.js

Ще ти помогне да създадеш т.нар. “Sticky” (“залепен”) сайдбар с фиксирана позиция.

StickyMojo.js

Линк

ddSlick

Плъгин, който ще ти позволи да вмъкнеш изображения и описание към падащ (drop-down) списък.

ddSlick

Линк | Демо

jQuery Collapse

Лек плъгин, чрез който можеш да създадеш функцията “скриване/показване” (hide/show) на съдържание.

jQuery Collapse

Линк | Демо

Типография

ArcText.js

Извиване на текст под формата на арка с jQuery и CSS3.

ArcText.js

Линк | Демо

Lettering.js

Страхотен плъгин, който ти дава пълен контрол върху текста на твоята страница. Начина на работа е елементарен. Плъгина огражда всяка буква от определения текст в <span> елемент и задава class с определена стойност на всеки от тях. Така имаш възможност да стилизираш всяка буква поотделно.

Lettering

Линк

Textualizer

Плъгин, който ти позволява да направиш плавен преход между кратки пасажи от текст.

Textualizer

Линк

Trunk8

Интилигентен плъгин, който “отзрязва” излишните символи в края на текста като запазва съдържанието в определените граници и предотвратява застъпването с други елементи.

Trunk8

Линк

Слайдшоу / Slideshow

FlexSlider

Страхотен, изцяло адаптивен jQuery плъгин. Някои от предимствата му са: чист и семантичен код, поддръжка от всички популярни браузъри, хоризонтално или вертикално слайдшоу с плавна анимация и др.

FlexSlider

Линк

Rslider

Лесен за употреба плъгин, с който можеш да създадеш адаптивно слайдшоу на цял екран.

Rslider

Линк | Демо

BookBlock

Плъгин, който може да се използва за създаване на слайдшоу подобно на разглеждане на книжка. Прехода между отделните слайдове създава чувството на “прелистване”.

BookBlock

Линк | Демо

Rhinoslider

Гъвкав слайдер с богато разнообразие от ефекти. На сайта дори има специален генератор, чрез който ти самият можеш да създадеш уникални ефекти за още по-добри резултати. Rhinoslider е лесен за употреба и може да се настрои в няколко стъпки.

Rhinoslider

Линк

Sequence.js

Адаптивен слайдер с уникални CSS3 преходи (transitions). Някои от основните му предимства са: поддръжка от всички съвременни браузъри, изчистен и разбираем код, адаптивен дизайн и CSS3 преходи.

Sequence.js

Линк | Демо

ResponsiveSlides.js

Лек и сравнително лесен за употреба плъгин с множество опции. Черти: напълно адаптивен, малък размер, CSS3 преходи с JavaScript алтернативи, прост код, поддръжка от множество браузъри и други.

ResponsiveSlides.js

Линк

Форми

jQuery File Upload

Интуитивна форма за качване на файлове. Предлага различни функции като избор на множество файлове, поддръжка на drag-and-drop, показване на прогрес, преглед на изображения и други.

jQuery File Upload

Линк

Credit Card Validator

Валидатор, който засича и валидира номерата на различни по вид кредитни карти.

Credit Card Validator

Линк

Други

Scroll Path

Плъгин за ръчно определяне на пътя и посоката (линията) за движение на скрола.

Scroll Path

Линк

Stellar.js

Бързо и лесно създаване на parallax ефект. Това е ефект, при който някои от елементите променят позицията си при скрол, създавайки чувството на движение и динамичност.

Stellar.js

Линк

iPicture

Интерактивни снимки с възможност за добавяне на допълнитело описание под формата на pop-up.

iPicture

Линк

jQuery Transit

Плъгин, чрез който можеш да постигнеш гладки CSS3 преходи (transition) и анимации. Поддържа се от повечето модерни браузъри, така че е можеш да постигнеш доста добри резултати.

jQuery Transit

Линк

Backstretch

Елементарен плъгин, който е създаден с една единствена цел – да те улесни в поставянето на фонови изображения, които динамично променят размера си при оразмеряване на страницата или елемента.

Backstretch

Линк

Noty

jQuery плъгин, който ще те улесни в създаването на приятелски pop-up съобщения като алтернатива на стандартния alert прозорец. Съобщенията могат да бъдат позиционирани на различни места от страницата.

Noty

Линк

Това е всичко. Мислиш ли, че тези плъгини ще улеснят работата ти? Използваш ли вече някой от тях? Сподели мнението си в коментарите по-долу.

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

1 страхотен коментар

  1. 1

    jan
    07 януари 2013 09:50

    Много добър подбор :-)

Твоят коментар

* - задължителни полета