Полезные плагины для сайта на jQuery

Гале­реи, парал­лакс, меню и всплы­ва­ю­щие уве­дом­ле­ния — обзор про­ве­рен­ных jQuery-плагинов.

В ста­тье про jQuery мы ска­за­ли: плюс jQuery в том, что для этой биб­лио­те­ки есть пла­ги­ны на любой слу­чай. Наста­ло вре­мя это дока­зать — дарим вам под­бор­ку класс­ных и про­ве­рен­ных пла­ги­нов на все слу­чаи жиз­ни.

1. Slideout.js

slideout.js.org

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

Отдель­ное спа­си­бо раз­ра­бот­чи­кам за то, что этот пла­гин весит все­го 2 кило­бай­та и не тре­бу­ет ника­ких допол­ни­тель­ных над­стро­ек.

2. PhotoSwipe

photoswipe.com

Нуж­на кра­си­вая гале­рея на сайт? Ставь­те PhotoSwipe — про­ве­рен­ную гале­рею с ани­ма­ци­ей, мно­же­ством настро­ек и актив­ным сооб­ще­ством. Подой­дёт, если вам нуж­но про­сто кра­си­во раз­ме­стить фото на сай­те, что­бы их мож­но было листать, раз­во­ра­чи­вать на весь экран и начи­нать про­смотр с любой кар­тин­ки.

3. Toastr

codeseven.github.io/toastr/

Пла­гин для уве­дом­ле­ний на все слу­чаи жиз­ни. Настра­и­вать мож­но всё — от тек­ста сооб­ще­ния до ани­ма­ции появ­ле­ния и дли­тель­но­сти пока­за. Мож­но на сво­ём сай­те делать вид, что кто-то толь­ко что зака­зал ваш про­дукт из Буда­пешта, а кто-то дру­гой толь­ко что про­смат­ри­вал эту стра­ни­цу и тоже хотел купить. Всех такие всплы­ваш­ки бесят, но они рабо­та­ют.

4. SweetAlert

sweetalert.js.org

Меня­ет стан­дарт­ные бра­у­зер­ные уве­дом­ле­ния на стиль­ные и замет­ные сооб­ще­ния. Теперь про­пу­стить их будет слож­нее, а поль­зо­ва­тель сра­зу пой­мёт, что он него что-то хотят. Что­бы понять, как это рабо­та­ет, срав­ни­те два уве­дом­ле­ния: стан­дарт­ное и SweetAlert:

Стан­дарт­ное

SweetAlert

5. jQuery-Tabledit

markcell.github.io/jquery-tabledit

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

6. Skrollr

prinzhorn.github.io/skrollr

Лёг­кий спо­соб сде­лать эффект парал­лак­са на стра­ни­це — исполь­зо­вать Skrollr. Парал­лакс в общем слу­чае — это когда что-то дви­жет­ся на перед­нем фоне быст­рее, чем на зад­нем или на осталь­ных. Эда­кое псевдо-3D, толь­ко при скрол­ле. Парал­лакс любят исполь­зо­вать про­из­во­ди­те­ли смарт­фо­нов на застав­ках, а с этим пла­ги­ном мож­но сде­лать в таком сти­ле целый сайт.

7. IntroJS

introjs.com

Удоб­ная шту­ка для созда­ния обу­ча­ю­щих сай­тов или поша­го­вых руко­водств. Она поэтап­но пока­жет все эле­мен­ты на стра­ни­це и объ­яс­нит, что они озна­ча­ют. Если нуж­но сде­лать онлайн-презентацию для заказ­чи­ка и нет вре­ме­ни объ­яс­нять — бери­те IntroJS.

8. ScrollMagic

scrollmagic.io

Хит­рый пла­гин с огром­ны­ми воз­мож­но­стя­ми настро­ек. Он закреп­ля­ет какой-то эле­мент стра­ни­цы в опре­де­лён­ном месте и вклю­ча­ет ани­ма­цию в нуж­ный момент. Нуж­ный момент выби­ра­е­те вы сами, и их может быть несколь­ко на одной стра­ни­це. Посмот­ри­те при­мер, и вам ста­нет понят­но, насколь­ко крут этот пла­гин.

9. FloatLabel.js

labs.mikemitchell.co.uk/FloatLabelJS/

Про­стой, но удоб­ный пла­гин: он рабо­та­ет с поля­ми вво­да и сле­дит за тем, когда вы нач­нё­те туда что-то вво­дить. Как толь­ко нач­нё­те — он дела­ет из назва­ния поля мини-заголовок и поме­ща­ет его наверх:

10. jQuery GoUp!

dnlnrs.github.io/jquery-goup/

Самый про­стой пла­гин в обзо­ре. Кноп­ка про­сто воз­вра­ща­ет вас наверх, в самое нача­ло стра­ни­цы. Когда лень скрол­лить.

Подписывайтесь на наш канал, чтобы совершенствоваться во всем!