Лучшие плагины jQuery в 2020г


Содержание материала:

Топ-40 полезных jQuery-плагинов 2013

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

Ежегодно появляются сотни новых jQuery-плагинов. Некоторые из них реализуют простейшие базовые функции, другие же – сложный специфический функционал. В любом случае, полезны обе категории плагинов. Ниже, приводится обзор топ-40 новейших jQuery-плагинов 2013 года. Взгляните на список и дайте нам знать в комментариях, если мы пропустили что-то из списка ваших любимых!

Jquery Avgrund

Это отличное решение для реализации диалоговых окон, хотя и несколько ограниченное в возможностях.

Cool Kitten

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

Snack.js

Простая и компактная библиотека для JavaScript отлично подойдет для небольших проектов, где вам необходимо объединить вместе несколько более мелких сайтов. Однако, вы можете выполнять и более сложные вещи с помощью этого плагина.

Arctext

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

140medley

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

Bacon

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

Sticky

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

FitText.js

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

xui.js

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

jQuery Knob

Плагин позволяет вам конвертировать стандартные элементы input в элементы jQuery, что даст возможность придать им различный визуальный вид и сделать более наглядными.

Stellar.js

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

Alertify.js

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

Zepto.js

Это библиотека с богатыми возможностями с упором на использование в Android и iOS.

jQuery File Upload

Это виджет, реализующий множественный выбор файлов за один раз, поддержку «drag & drop», предпросмотр изображений, прогресс-бары и многое другое.

iCheck

Поможет кастомизировать управляющие элементы на формах.

Complexify

Выполняет оценку криптостойкости вводимых паролей.

Fancy Input

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

Long Press

Позволяет упростить ввод редких символов.

Chosen

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

Pickadate.js

Помогает создать дружественный и наглядный мобильный календарь.

Parsley.js

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

gmaps.js

Удобная библиотека для установки маркеров и координат, слежения за событиями и многого другого.

Super Scrollorama

Предоставляет в ваше распоряжение множество различных вариантов анимации.

Typeahead.js

Это плагин для автоматического завершения набираемых слов, разработанный компанией Twitter.

Textillate.js

Плагин объединяет вместе мощь библиотеки lettering.js и animate.css.

Scrollpath

Отлично подходит для определения желаемой вами траектории скроллинга.

Windows

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

Lettering.js

Позволяет использовать необычную типографию.

Gridster.js

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

Freetile

Плагин эффективно динамически организует контент на веб-странице.

Stalactite

Плагин эффективно организует на веб-странице контент разного размера.

jQuery Shuffle Letters

Реализует интересный эффект случайного появления текста.

nanoScroller.js

Простой плагин для создания скролл-баров, стилизованных под Mac OS.

Tubular.js

Вы можете использовать этот плагин для установки видео с Youtube в качестве фонового видео вашей страницы.

jQuery TouchTouch

Плагин для создания плавной анимации.

iPicture

Поможет в создании красивых интерактивных всплывающих подсказок с различным наполнением.

Adipoli jQuery Image Hover Plugin

Создает красивые эффекты при наведении курсора на изображение.

jQuery Custom Content

Представляет собой скролл-бар, который легко настраивается с помощью CSS.

Backstretch

Используйте этот плагин для добавления слайд-шоу с динамически изменяемыми размерами.

Данная публикация представляет собой перевод статьи « 40 Amazing jQuery Plugins For 2013 » , подготовленной дружной командой проекта Интернет-технологии.ру

Множество различных jQuery примеров , элементы CSS
и большое количество других инструментов для Вашего сайта !

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

Различные способы создания красивого и эффектного меню для сайта.

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Light Modal — Модальное окно на чистом CSS

Light Modal — это новый легкий, мощный и простой в использовании плагин в виде модального окна на CSS для контента и изображений.

jQuery Plugins – 20 Amazing jQuery Plugins and 100+ Excellent jQuery Resources

Today we are presenting 20 Amazing jQuery Plugins and 100+ jQuery Resources for designers and developers. how wants to make web faster.

You may be interested in the following modern trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

jShowOff: A jQuery Content Rotator – jQuery Plugin

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg.
) inside a specified wrapper element (eg.

    ) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.

Preview:

Download jQuery Content Rotator Plugin

Requirements: jQuery
Compatibility: All Major Browsers
Download: http://github.com/ekallevig/jShowOff

Quick & Easy Zooming With jQuery – Zoomy

Zoomy is simple. Zoomy is easy to implement and customize. Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image. Most CMS systems save or create multiple sizes of an image so its easy to set up. Just link the zoom picture on the display picture, and tell the plugin to use that link when zooming. It takes only a little bit of scripting. Zoomy is a very easy-to-implement jQuery plugin which helps creating zoom-to-image functionality.

Preview:

jQuery Upload/Crop Image: Upload & Crop Image With PHP & jQuery

jQuery upload/crop image tool use for upload and crop different types of images, JPG, GIFs and PNG and you can now upload images and have a random file name (this fixes the caching issue some of you have had) you need “Image Area Select” plugin.

What we needed was a way to upload a JPG image, resize it if required then crop it to given height and width.

Preivew:

ProcessWire: PHP CMS + Framework With jQuery

ProcessWire is an open source content management system (CMS) and web application framework aimed at the needs of designers, developers and their clients. ProcessWire gives you more control over your fields, templates and markup than other platforms, and provides a powerful template system that works the way you do. Not to mention, ProcessWire’s API makes working with your content easy and enjoyable. Managing and developing a site in ProcessWire is shockingly simple compared to what you may be used to.

Preview:

jRating – Flexible jQuery Ajax Rating Plugin

jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”. There is also an option to display small or big stars and images can be changed with any other file easily.

Preview:

The-M-Project: HTML5 Javascript Framework For Cross-Platform Mobile Apps

The-M-Project contains all UI and Core files to build jQuery Mobile based mobile HTML5 Apps. The-M-Project is an exciting HTML5 JavaScript framework for building cross-platform mobile web apps (iOS, Android, Palm webOS, BlackBerry). It makes use of jQuery on the JavaScript part and contains all ui + core files with features like offline support, internationalization and more.

Preview:

Requirements: Git & nodeJS
Compatibility: All Major Mobile Browsers
Demo: http://the-m-project.net/showcase.html
Download: http://the-m-project.net/latest_stable.zip

Arbor.js: Graph Visualization Library Using Web Workers & jQuery

Arbor.js is a graph visualization library built with web workers and jQuery. It provides an efficient, force-directed layout algorithm, abstractions for graph organization and screen refresh handling.

The library doesn’t force a specific method for screen-drawing and you can use it with canvas, SVG, or even positioned HTML elements; the best one that fits your project.

Preview:

Requirements: jQuery
Compatibility: All Modern Browsers
Download: https://github.com/samizdatco/arbor

Simplify & Customizable Form Validation With jQuery.validval Plugin

jQuery.validVal is a plugin designed to simplify & customizable form validation. It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX-forms) with very little effort. It can be used for validating any kind of HTML form (including Ajaxed ones) and works by defining the rules within class names.

Топ-пост этого месяца:  Анимация элементов при прокрутке страницы с помощью CSS библиотеки

Preview:

Requirements: jQuery
Compatibility: All Major Browsers
Demo: http://validval.frebsite.nl/examples.php

New FancyMoves Jquery Product Slider

FancyMoves is a great slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

FancyMoves, a new jQuery Product slider for your website or blog. This slider is built off the Moving Boxes slider, with FancyBox for expanding images.

Preview:

jQuery Plugin For Cloning Form Elements:Sheepit!

SheepIt is a jQuery plugin that allows you to clone form elements dynamically. It is very useful to develop advanced forms that require the same type of load data multiple times.

Sometimes, a static form is not enough as we may want to make it possible for user to define a flexible number of addresses, phones, e-mails, etc.

This is where SheepIt!, a jQuery plugin comes in. It allows cloning form fields dynamically where end-users can easily decide to insert a new field (or remove a manually inserted one).

Multiple form elements can be added at the same time and there are callbacks provided for each events (before/after the insertion of elements).

Preview:

Download jQuery Overlay Effect Menus

In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.

Preview:

File Download jQuery Plugin: jDownload

jDownload is a jQuery plugin which aims to provide more details to the end users about the file to be downloaded.

Once a download link is clicked, it sends an Ajax query to a PHP file which returns the name, type and size of the file in a modal window.

Preview:

Requirements: jQuery & jQuery UI
Compatibility: All Major Browsers
Download: http://code.google.com/p/jquery-jdownload/downloads/list

Creative Radical Web Typography With jQuery – Lettering.js

Lettering.js, a lightweight and easy to use Javascript injector for radical web typography aims to fill this gap.?

It simply divides any given element into pieces of s wrapping each letter with a custom class.

Preivew:

Requirements: jQuery
Compatibility: All Major Browsers
Download: http://github.com/davatron5000/Lettering.js

SlideNote:jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. For more information or to see a demo, scroll down. The plugin displays the contents of any URL and, optionally, it can display only the contents of an element inside that URL.

Preview:

Requirements: jQuery
Compatibility: All Major Browsers
Download: http://github.com/tommcfarlin/slidenote

jQuery Horizontal Accordions – jQuery Plugin for Easy Accordion

Easy Accordion is a highly flexible jQuery plugin for creating horizontal accordions quickly.

It generates the accordion from definition lists (dts, so it is SEO friendly) and has support for multiple instances to be ran on the same web page.

The plugin can slide any content like images, lists, Flash, etc. and its look can be totally customized via CSS.

There are multiple options offered like setting the slide to be displayed on initial load, auto-display to be on/off and including the slide number or not.

Preview:

carouFredSel – Infinite jQuery Carousel Scroll Horizontal & Vertical

carouFredSel is a jQuery plugin that converts any kind of HTML element into an infinite and circular carousel. It can scroll one or more items at the same time both horizontally or vertically.

jQuery.carouFredSel is a plugin that turns any kind of HTML element into an infinite, circular carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, automatically, by pressing buttons or keys on the keyboard.

The carouFredSel-plugin was built using the jQuery-library.
It is licensed under the MIT-license.

Preview:

Slick jQuery Image Slider Plugin “Orbit”

Orbit is a lightweight (2.8kb compressed) jQuery plugin for displaying multiple images in a limited space.The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the title tags of these images.

Most jQuery image sliders hover at around 8 kbs for minified versions, and around 15kbs or more for uncompressed development files, but what if there was a way to keep the simple fades, slides, and a couple other nifty bits, but strip the bloated and corny diagonal-cross fades or spiral dissolves. But wait! Oh snap, there is a way, and it’s called Orbit.

Preview:

100+ Excellent jQuery Resources

jQuery Plugins Page 1

Chakra UI – Simple, Modular & Accessible UI Components for React Applications

Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.

D2Admin – An Elegant Open Source Dashboard

D2Admin is a fully open source and free back-end product front-end integration solution. It’s using the latest front-end technology stack.

Features

  • Build with vue-cli3
  • First screen loading waiting animation
  • Five themes
  • Built-in UEditor rich text editor

Gatsby – Blazing Fast Modern Site Generator for React

Gatsby is a free and open source framework based on React that helps developers build blazing fast modern websites and apps.

Node.js Best Practices List

The largest Node.js best practices list. This repository is a summary and curation of the top-ranked content on Node.js best practices.

Search UI – Search Interface That Simply Works by Elastic

Search UI is a react library by Elastic that allows you to quickly implement search experiences without re-inventing the wheel. Use it with Elastic App Search or Elastic Site Search to have a search experience up and running in minutes.

Search UI puts components like Dynamic Filters and Facets, Search Bar, Result Feed Layouts, and Autocomplete at your disposal.

Gekko – Bitcoin Trading Bot Written in Node.js

Gekko is a Bitcoin trading and backtesting platform that connects to popular Bitcoin exchanges. It is written in JavaScript and runs on Node.js

DPlayer – HTML5 Danmaku V > September 17, 2020 276 HTML5 Media

DPlayer is a HTML5 danmaku video player to help people build video and danmaku easily.

Features

  • Danmaku
  • Screenshot
  • Hotkeys
  • Quality switching
  • Thumbnails
  • Subtitle

Relay – JavaScript Framework for Building Data-Driven React Applications

Relay is a JavaScript framework for building data-driven React applications.

Vant – Mobile UI Components Built on Vue

Vant is a lightweight mobile UI components library built on Vue.

Features

  • 60+ Reusable components
  • 90% Unit test coverage
  • Extensive documentation and demos
  • Support babel-plugin-import

React Big Calendar – Google Calendar/Outlook Like Calendar Component

react-big-calendar is a Google Calendar/Outlook like events calendar component built for React and made for modern browser and uses flexbox over the classic tables-ception approach.

Airframe React – Free & High Quality Dashboard Template Based on Bootstrap & React

Airframe React is a free open source high quality dashboard / admin / analytics template based on Bootstrap 4 & React. It works great on any smartphone, tablet or desktop.

Also jQuery version is available.

Jest – Delightful JavaScript Testing

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more.

Faker.js – Generate Massive Amounts of Fake Data in the Browser and Node.js

Faker.js is a project to generate massive amounts of realistic fake data in Node.js and the browser.

Yup – JavaScript Object Schema Val > August 19, 2020 218 Validation

Yup is a dead simple javascript object schema validator and object parser. Yup separates the parsing and validating functions into separate steps so it can be used to parse json separate from validating it.

Ola – Smooth Animation Library for Interpolating Numbers

Ola is a smooth animation library for inbetweening / interpolating numbers in realtime.

Top 100 Free jQuery Plugins 2020

Top Best 100 free jQuery plugins published in 2020.

Multi-step Modal Wizard Plugin For Bootstrap 4 — MultiStep

A jQuery/Bootstrap plugin which dynamically generates and displays a multi-step wizard in a popup window based on Bootstrap’s Modal component.

Interactive Timeline Sl > 09/28/2020 — Time & Clock — 3810 Views

A dynamic, interactive, responsive, touch-friendly, SEO-friendly timeline that makes it possible to displays event data in a horizontal slider interface.

Pretty Responsive Calendar In jQuery — Nao Calendar

Nao Calendar is a jQuery plugin to render a fully responsive, pretty clean calendar widget (with support for date selection) on the webpage.

Resize/Rotate/Crop Images With jQuery — Cropzee

Cropzee is an easy, lightweight jQuery image cropper which enables the user to resize, rotate, crop, preview an image in an elegant modal popup.

Responsive Flip Countdown Clock In jQuery — ResponsiveFlipper

A fully responsive, jQuery & CSS3 powered flip clock plugin to display a digital countdown timer in a custom Datetime format.

Minimal Image Gallery With Zoom On Hover — Zoomy-JS

Zoomy-JS is a jQuery plugin to dynamically render an image gallery with thumbnail previews from an array of images. Click on the thumbnails to switch between images.

Customizable Pie Chart/Round Progress Bar Plugin — easy-pie-chart

easy-pie-chart is a lightweight JavaScript/jQuery plugin to draw animated, customizable, retina-ready pie/ring charts and circular progress bars using HTML5 Canvas and requestAnimationFrame API.

Elegant Calendar & Date Selector In jQuery — Calender.js

An ultra-lightweight jQuery plugin to generate an inline calendar on the webpage that allows the user to picker a date and gets the selected day for further use.

Collapsible S > 06/11/2020 — Menu — 1903 Views

The jQuery SimpleSidebar plugin converts a nested HTML list into a collapsible, multi-level sidebar navigation for dashboard, admin panel, documentation webpage, and much more.

Responsive Image/V > 06/22/2020 — Slideshow — 1895 Views

The Bo-Slider jQuery plugin helps you create a responsive, infinite-looping slideshow/carousel that supports both images and videos.

WordPress Style Vertical S > 07/10/2020 — Menu — 1875 Views

rvnm is a jQuery plugin that helps developers create a responsive, mobile-friendly sidebar navigation as you see on WordPress admin panel.

Customizable Emoji Picker For Input And Textarea — jQuery inputEmoji

inputEmoji is a jQuery plugin which provides a simple way to insert emojis into textarea and/or input elements.

Stacked Card Carousel/Sl > 07/31/2020 — Slider — 1744 Views

A fancy carousel slider which makes use of jQuery and CSS3 animations to loops through a stack of cards with navigation arrows.

Dark Mode For Bootstrap — Dark Mode Switch

A JavaScript plugin uses Bootstrap switches component to create a switch button which allows the user to toggle between Dark Mode and Light Mode on your webpage.

Basic S > 06/26/2020 — Menu — 1612 Views

Sider Menu is a minimal jQuery plugin to generate basic, collapsible, multi-level sidebar navigation for Bootstrap 4 projects.

Enhanced Multiple Select For Bootstrap 4

An enhanced single select & multiple select plugin for Bootstrap 4 that converts the regular select element into a searchable, user-friendly combo box.

Mobile-friendly JSON Carousel In jQuery — Sl > 08/05/2020 — Slider — 1489 Views

Just another jQuery based slider that dynamically renders a responsive, touch-enabled, cross-platform carousel slider from an array of images with links defined in a JSON file.

Versatile Date/Time/Month/Year Picker — Datepicker.js

A flexible, customizable, open-source, full-featured date picker plugin for selecting times, dates, time ranges, date ranges, months, and years in an elegant way.

Count Up To A Number When Visible — jQuery rCounterup

rCounterup is a small and smart jQuery counter plugin which counts up to a specifc number when the number becomes visible.

Sticky Responsive Mega Menu Plugin — jQuery megaMenu

A lightweight jQuery plugin which generates a responsive, sticky, customizable, mobile-compatible, SEO-friendly, multi-column mega menu from nested HTML lists.

Easy jQuery Paginator For AJAX/Static Contents — pagination.js

pagination.js is a lightweight, cross-browser, fully customizable jQuery pagination plugin for paginating static and/or AJAX content on the client side.

Modern Responsive Hamburger Navigation In jQuery

A modern responsive navigation concept that automatically collapses the horizontal header menu into a hamburger navigation on small screen devices.

Touch-friendly Carousel With jQuery And Velocity.js

A responsive, mobile-friendly jQuery carousel slider plugin which uses Velocity.js for smooth, fast, accelerated animations between slides.

Horizontal/Vertical Image Carousel Plugin — jQuery img-scroll

img-scroll is a jQuery based image scroller where the users are able to infinitely scroll through a list of images along the x or y axis.

Tiny Responsive Image Carousel In jQuery — Sl > 07/04/2020 — Slider — 1235 Views

Slider Auto is a tiny and simple-to-use jQuery slider script to generate a fully responsive image slider carousel with automatic slide transitions between slides.

Dynamic Tags Input With Autocomplete Using AJAX

A lightweight and dynamic jQuery tags input plugin that allows the user to type multiple items as tags or select tags from a suggestion list as they type.

Display Your Images/Iframes In A Sl > 10/21/2020 — LightBox — 1178 Views

A jQuery based simple gallery lightbox plugin that displays your images in a responsive modal popup and allows the user to switch between these images just like a slider.

Minimal Countdown Timer With Optional Controls

A simple, plain, jQuery based countdown plugin which enables you to start, pause, reset a timer inside any HTML element.

WYSIWYG BBCode Editor Based On Bootstrap And Ace Editor

A simple, configurable, multi-language WYSIWYG BBcode editor built with jQuery, Bootstrap 4, Font Awesome 4/5, and Ace editor.

Minimal Responsive Card Sl > 07/22/2020 — Slider — 1125 Views

A flexible, horizontal, fully responsive card slider built with jQuery and CSS flexible box.

Sl > 06/14/2020 — Animation — 1101 Views

A really small jQuery plugin which makes use of CSS3 animations to make any elements slide in when you scroll down the webpage.

Simple Responsive HTML5 Audio Player — jQuery Fraudio

Fraudio is a minimal, clean, responsive, custom audio player plugin which works with audio tag and supports any HTML5 audio formats: ogg, mp3, wav.

Draggable & Touch-enabled Carousel Sl > 08/09/2020 — Slider — 1018 Views

slider-x is a simple-to-use jQuery plugin for creating a responsive, draggable/swipeable, mobile-friendly, auto-rotating carousel slider on the web application.

Minimal Touch-enabled Offcanvas Menu — jQuery Offcanvas.js

A jQuery plugin to create responsive, touch-enabled, SEO-friendly, multi-level offcanvas sidebar menus with sliding sub menus on your cross-platform web applications.

Smooth Horizontal Text Scroller — jQuery eocjsNewsticker

An easy yet configurable jQuery news ticker plugin which smoothly, horizontally, and infinitely scrolls through text blocks at a given speed.

8 Carousel Sl > 08/08/2020 — Slider — 950 Views

This is a list of 8 elegant, responsive, multi-functional, jQuery/Bootstrap 4 powered carouse/slider templates created to meet all your carousel needs.

Responsive Sl > 09/08/2020 — Slideshow — 930 Views

A JavaScript (jQuery) slider script to create a responsive, accessible, auto-rotating background slideshow/carousel with a subtle blur transition when switching between images.

Tiny jQuery Replacement For Select Boxes — Bselect

A plugin that dynamically renders a performant, customizable, searchable, user-friendly dropdown from an object of options.

Canvas Based Interactive Image Map In jQuery — Pictarea

Pictarea is a jQuery plugin that helps you draw interactive, configurable, selectable markers/notes on your image using image map and HTML5 canvas.

Vertical Drilldown Menu With jQuery And HTML List — Stack Menu

An easy, SEO-friendly, mobile-ready jQuery navigation plugin which converts the nested HTML list into a vertical stack menu (also known as drill down menu).

Minimal Background Image Parallax Effect In jQuery — Snake Parallax

A lightweight (less than 1kb) jQuery Parallax plugin that automatically adds a parallax scrolling background image to the hero section in your landing page.

Add Autocomplete And Typeahead To Inputs — jQuery Autocomplete

Lightweight and performant jQuery autocomplete/typeahead plugin for inputs that can be used to filter through huge suggestion lists such as country lists, language lists, etc.

Linear Progress Indicator In jQuery — rProgressbar

rProgressbar is a cross-browser, easy-to-use jQuery linear progress indicator which helps you generate an animated, customizable, horizontal bar based on a percentage.

Minimal Stopwatch & Countdown App In jQuery — js-timer

js-timer is a lightweight, nice-looking timer script that makes it simple to generate a stopwatch & countdown web app just in a minute.

Dynamic Responsive Sl > 09/05/2020 — Slider — 849 Views

jsSlider is a super tiny jQuery plugin that dynamically renders a fully responsive image slider from an array of objects containing image links and alternative text.

Increment Numeric Value At A Given Speed — jQuery Counter

A really simple jQuery counter (count up to) script for incrementing up to a certain number at a given speed and performing a callback when the countup is finished.

Marquee-like Content Scrolling Plugin — jQuery Text Marquee

This is a minimal, responsive jQuery Text Marquee plugin to generate a horizontal text scroller if your long text overflows its parent container.

Auto Add Thousand Separators In Numbers — Easy Number Separator

An Easy Number Separator created for formatting the currency input that automatically adds thousand separators in numbers when entered in an input field.

Customizable Twinkling Stars Effect In jQuery — Starlight.js

Starlight.js is a simple jQuery plugin for creating twinkling visual effects on the background that randomly animates stars (squares or circles) based on the frequency and density defined by the user.

Stick Table Header To The Top When Scrolling Down — fixHeader

fixHeader is a super tiny jQuery plugin which sticks the table header to the top of the page when the user scrolls past the table thead element.

Generate SEO-friendly Accordions From HTML Lists — accordable.js

accordable.js is a lightweight (

2kb minified) jQuery plugin to generates a responsive, semantic, SEO-friendly accordion component from a normal HTML unordered list.

Feature-rich Notification & Popup Box Plugin Based On Bootstrap 4

This is a full-featured jQuery popup plugin that lets you create moveable, mobile-friendly dialog boxes and toast-like notifications using Bootstrap 4 framework.

Animate The Page Title In The Browser Tab — titleEffect

titleEffect is a jQuery plugin to create impressive document titles that make it simple to animate the title text in the browser tab.

Responsive Hamburger Dropdown Menu With jQuery And CSS3

A responsive, mobile-compatible navigation system that transforms the regular horizontal header navigation into a dropdown menu triggered by a hamburger toggle button.

Drag and Drop File Uploading With jQuery — Image Uploader

This is a simple, customizable jQuery image uploader plugin that features drag’n’drop file selection, image preview, predefined image list, and extension/mime/file size validation.

Create Animated Clouds Using Canvas And WebGl — klouds.js

klouds.js is a jQuery & Vanilla JavaScript plugin to generate animated, customizable clouds using HTML5 canvas and WebGL API.

Graphical Gauge Meter With jQuery and Dx.js

An elegant, animated, graphical gauge meter/chart that uses jQuery and dx.js libraries for SVG drawing.

Nice Sl > 06/21/2020 — Menu — 726 Views

A pretty nice sliding menu written in jQuery/CSS that slides out from the toggle button and transforms the hamburger button into a close button when toggled.

Responsive Retina-ready Sl > 09/19/2020 — Slider — 726 Views

This is a small slider jQuery plugin to create a responsive, mobile-friendly, retina-ready, full-screen content slider/carousel from semantic HTML markup.

Fast Responsive Image Lightbox Plugin — jQuery mobileLightBox

A simple, blazing-fast, mobile-friendly lightbox plugin which displays the full-size version of your image in a responsive modal popup.

Make Header Navigation Sticky On Scroll Up — Shy Header

Shy Header is a smart sticky menu jQuery plugin that hides the header navigation on scroll down and makes it always be visible on scroll up.

Show And H > 10/09/2020 — Animation — 711 Views

A jQuery plugin for creating expandable content that shows and hides parts of content by changing the height of the container element with toggle buttons.

Display Single Image Or Image Group In Lightbox — mBox

mBox is a tiny, configurable, responsive, mobile-friendly jQuery lightbox plugin which displays a single image in a lightbox popup or showcase s a group of images as a gallery.

Responsive Stacked Card Carousel — jQuery Sl > 10/10/2020 — Slider — 688 Views

A responsive carousel script which slides through a set of slides with navigation arrows and pagination bullets just like stacked cards.

Nested Modal Windows With Blurred Background — jQuery Modally

Modally is an awesome jQuery nested modal plugin that allows your visitors to open another modal window in the current modal window.

Cross-fading Text Ticker With jQuery And JSON — ticker.js

Ticker.js is a small jQuery news ticker plugin which fades through a group of text content with links stored in JSON objects.

Engage Your Audience With A Conversational Form — Chatty

Chatty is a jQuery Conversation Chat plugin designed to engage your audience and collect user data with a beautiful, interactive conversational form just like a real-time chatbot.

Easy Toast-style Notification Plugin For Bootstrap — Notify

Notify is a Bootstrap/jQuery notification plugin to create modern, customizable, toast-style notification popups on your Bootstrap 4+ webpage.

Responsive Collapsible Menu For Bootstrap 4

A jQuery/Bootstrap 4 extension that responsively handles the horizontal nav and adds overflowing menu items into a dropdown when there isn’t enough space to fit all menu items.

Customizable Lightbox That Supports Any Content — Zoombox

Zoombox is an easy-to-use yet feature-rich, highly customizable jQuery lightbox plugin that supports any media types: Text, Images, HTML5 Videos, Youtube/Vimeo Videos, Iframe contents and much more.

Топ-пост этого месяца:  События в JavaScript

JSON Viewer With Path Selection — JSON Path Picker

A jQuery based JSON viewer & path picker to render your JSON data in a tree structure where you can get the path to each key by clicking on the output icon.

Cross-browser Scroll Snapping In jQuery — scroll-to-section

scroll-to-section is a jQuery implementain of the Scroll Snapping functionality for one page scroll website and single page web app. Works perfectly on all modern web & mobile browsers.

Responsive Parallax Effect For Hero Image — smooth-parallax.js

A jQuery parallax plugin which applies fade out and smooth parallax scrolling effects to the background image of the hero header section of your webpage.

Create Custom V > 07/03/2020 — Other — 632 Views

mediaStyler is a small jQuery plugin which lets you create custom Video and Audio player controls using your own CSS styles.

Autocomplete/Typeahead Plugin With Bootstrap 4 Dropdown

A super tiny jQuery/Bootstrap autocomplete plugin which attaches a basic JSON based autocomplete/typeahead functionality to your input field using the Bootstrap 4’s Dropdown component.

Transform Select Box Into Bootstrap Dropdown — bootstrapSelect

bootstrapSelect is a jQuery/Bootstrap plugin which transforms the normal select box into a customizable, filterable Bootstrap dropdown list for better user experience.

Mobile-first Image Gallery & Lightbox Plugin — Ribbon Gallery

Ribbon Gallery is an ultra-small jQuery plugin to create a horizontal, mobile-first, touch-enabled image swiper where the users can enlarge and display images in a lightbox popup.


Multi-level Toolbar Menu Plugin With jQuery — Nice-Menu

The Nice-Menu jQuery plugin helps you create a dynamic, multi-level dropdown menu with support for checkboxes and radio buttons.

Performant Typeahead/Autocomplete Plugin — jquery-autocomplete.js

A lightweight, flexible, fast jQuery autocomplete/typeahead plugin which automatically suggests matching items while typing keywords (search terms) in a text field.

Simple Form Builder With JSON Schema — jQuery JSONForm

Just another JSON to Form builder that dynamically generates a Bootstrap-friendly HTML form from JSON data you provide.

Filter And Search Entries In List View — JsLocalSearch

JsLocalSearch is a small and fast jQuery client-side filter plugin which can be used to filter and search a list of elements you provide. Supports both plain text and HTML content.

Duplicate Form Elements With Add/Remove Capabilities — isiaFormRepeater

Yet another jQuery plugin for repeatable form elements that allow the end user to duplicate groups of form controls with add/remove capabilities.

Responsive Off-canvas Navigation With Smooth Scroll Integration

A responsive, mobile-friendly navigation system for your cross-platform web app which turns the regular navbar into an off-canvas side menu with a hamburger toggle button on the mobile device.

Filter Any Block Of Content Through Data Attribute — LingGalleryFilter

LingGalleryFilter is a generic jQuery filtering plugin to filter any block of contents (e.g. products, services, portfolios, galleries, etc) grouped by HTML data attributes.

Image Picker & Previewer For Bootstrap — Form Gallery

Form Gallery is a jQuery/Bootstrap plugin that allows the user to select and preview images just like a gallery. Designed to replace the native file input.

Create Beautiful Advanced Form Controls — jQuery Nao Input

Nao Input is a jQuery plugin to create beautiful, advanced, Material styled form controls (input, select, range slider, textarea, checkbox, radio button, etc) for modern web design.

Schedule Appointments In A Week View — Scheduler

A robust weekly scheduler plugin that makes it easier to schedule appointments (meetings, bookings, reservations, etc) in an HTML table based week view.

Minimalist Image Lightbox Script — Wicked

A simple, minimal, responsive, animated lightbox script created for image gallery. Written in HTML, CSS/CSS3 and a little bit of jQuery.

Creating Beautiful Dialog Boxes With popupWindow Plugin

Yet another JavaScript popup box replacement plugin for creating beautiful, animated alert, prompt and confirm dialog windows on the page.

Simple Flexible Pagination Plugin — jQuery Paginator

A simple, flexible, customizable jQuery paginator to provide a better pagination experience for multi-page web contents.

Offcanvas Navigation With Accordion/Tree Menus — S > 10/03/2020 — Menu — 523 Views

A jQuery/Bootstrap based responsive, multi-level, SEO-friendly, mobile-compatible, off-canvas sidebar navigation created for dashboard, admin panel, web app designs.

Slot-Machine Style Number & Option Picker In jQuery — Drum.js

Drum.js is a jQuery plugin for creating an iOS-style picker view where the users are able to select numeric values and/or select options by rotating the wheels just like a slot machine.

Use Youtube V > 09/11/2020 — Other — 517 Views

Yet another jQuery Youtube Video Background plugin which makes Youtube videos behavior like a covering background.

Full-featured Dynamic Data Table Plugin — Folium

Folium is a jQuery data table plugin for creating spreadsheet-like CRUD data grids with sorting, filtering, pagination, and custom cell rendering support.

Speed Up Your Webpage By Lazy Loading Images — jQuery lazy-load

Yet another jQuery based image lazy load plugin to speed up your web page & web app by lazy loading certain images as they enter the viewport.

Minimal AZERTY Keyboard With jQuery — asvKeyboard

asvKeyboard is a small virtual keyboard plugin which helps you create an on-screen AZERTY keyboard for French webpages or web apps.

Stick S > 10/01/2020 — Other — 477 Views

sticksy is a small and fast JavaScript/jQuery Sticky plugin which makes any element sticky within its parent container using position: absolute attribute.

Transform JSON To HTML Using JSON Templates — json2html.js

A fast, convenient JavaScript JSON to HTML library that transforms JSON objects into HTML using JSON templates. Works with Vanilla JavaScript, jQuery and Node.js.

Advanced Survey/Feedback/Quiz System — SurveyJS

SurveyJS is a robust, customizable, cross-platform Survey/Feedback/Questionnaire/Quiz JavaScript library designed for jQuery, Angular, React, VueJS, knockout, etc.

Display Percentage/Progress Values As Gauges — Circle Progress

Yet another circle progress bar plugin to display any numeric values in a responsive, customizable, animated percentage/progress graphs: circles, ring charts, pie charts, etc.

10 бесплатных jQuery-плагинов

С момента появления jQuery прошло почти 10 лет и на сегодняшний день это самая популярная JavaScript-библиотека. Десять лет назад доступ в интернет был возможен через ограниченное число браузеров, спроектированных таким образом, чтобы свести к минимуму возможность манипулирования HTML DOM (Document Object Model). JQuery оказался палочкой-выручалочкой для многих разработчиков, стремившихся к одинаковому отображению содержимого сайтов во всех существующих браузерах. Развивавшие jQuery энтузиасты стремились объединить возможности браузеров и таким образом создать общий для всех интерфейс, который будет работать независимо от типа и версии браузера. Основная заслуга разработчиков состоит в том, что они создали новые интерфейсы API, которые были лучше «родных» браузерных и реализовали функции, которые не поддерживались программным интерфейсом браузера. Однако некоторые разработчики не склоны переоценивать роль jQuery в решении проблем кроссбраузерности и настаивают на том, что библиотека стала столь популярной благодаря реализации querySelectors. Как обычно, истина где-то посередине.

На сегодняшний день браузерная экосистема является не такой сложной, как это было 10 лет назад. Несмотря на то, что некоторые браузеры не могут реализовать все, что предлагает HTML5 API, все же у разработчиков в наше время гораздо меньше проблем с кроссбраузерностью и реализацией различных функций. Если сегодня что-то отлично работает в Chrome, то, вероятно, это также будет работать в Firefox или Edge. Основные элементы JavaScript наряду с querySelectors хорошо задокументированы и поддерживаются всеми производителями браузеров. Поэтому на первый взгляд может показаться, что те проблемы, которые решает jQuery, более таковыми не являются. Чистый JavaScript всегда будет быстрее, чем решение с использованием библиотеки, так что возникает вопрос: а нужно ли сегодня использовать технологию, которая в какой-то мере уже устарела? Цикл CPU является товаром, а время нет. Будет ли экономия 30 кБ оправданной, если придется писать код, тестировать его, если уже есть готовое решение?

Все это вопрос выбора. Кто-то стремится к совершенному коду, кто-то использует фрагменты кода, созданные другими разработчиками. Библиотека jQuery насчитывает тысячи отлично работающих и хорошо задокументированных плагинов, которые повышают производительность и позволяют реализовывать самые смелые идеи. Многие из этих плагинов к тому же совершенно бесплатны. Предлагаем вашему вниманию 10 лучших jQuery-плагинов, которые активно поддерживаются и регулярно обновляются их создателями.

Firewall это очень интересный кроссбраузерный jQuery-плагин, предназначенный для работы с макетами на основе модульной сетки. Он позволяет создавать впечатляющие анимационные эффекты с использованием возможностей SCC3 и хорошо работает с call back events. Если нужно создавать гибкие макеты с множеством изображений типа Pinterest, то Firewall является наилучшим решением для создания динамических сеток. Freewall работает практически во всех современных браузерах и даже в древнем IE8, что делает этот плагин действительно универсальным инструментом.

Плагин multiscroll.js позволяет добавить на сайт разнонаправленную прокрутку основных элементов дизайна. Это облегчает создание мультипрокрутки для сайтов с двумя колонками или панелями. Основное назначение плагина заключается в привлечении внимания пользователя к главному контенту без ущерба для UX. Плагин отлично работает как на современных, так и на устаревших браузерах и, конечно, в мобильной среде.

RowGrid.js – это простенький плагин, которые позволяет расположить изображения на сайте ровными рядами, точно так же, как это сделано в поиске по изображениям Google. Это модно, красиво и не слишком навязчиво. RowGrid.js расставляет изображения в рядах, ориентируясь на размер родительского элемента: он подбирает картинки таким образом, чтобы они гармонично смотрелись в пределах установленных границ, при этом некоторые элементы подвергаются масштабированию. Однако при работе с этим плагином нужно помнить, что все изображения должны быть одинаковыми по высоте, иначе плагин не будет работать и красивой произвольной сетки не получится.

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

Плагин pagePilings.js позволяет реализовать очень интересные эффекты прокрутки, которые особенно впечатляюще смотрятся на одностраничниках. Пользователь просматривает контент, которые перемещается вверх и вниз, а скрипт срезает верхние слои содержимого, тем самым реализуя слайдер. Использование плагина поможет создать незабываемый опыт пользователя. Направление и скорость прокрутки можно легко настроить – в этом плане плагин обладает очень большими возможностями. PagePilings.js полностью отзывчивый, он отлично работает на любом экране и хорошо отображается в большинстве современных браузеров.

Основное назначение jQuery-плагина — создание плавных переходов между страницами, что позволяет улучшить опыт пользователя. Этот небольшой плагин позволяет создавать плавные и красивые CSS-анимации, которые сопровождают смену страниц. Плагин имеет свыше 60 различных эффектов, включая такие распространенные, как затухание, проявление, поворот плоскости кадра, флип, зум и многое другое.

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

Rippleria является созданным на основе концепции Material Design плагином, который создает эффект волны при клики мышки по элементу. Эффект может применяться к различным объектам, например, к кнопкам, иконкам или изображениям. Плагин легко настраивается и хорошо работает во всех современных браузерах.

Плагин Flickity отличается очень подробной документацией. Весь функционал понятно описан и логически структурирован. Это один из самых «отшлифованных» jQuery-плагинов для реализации эффекта карусели. При помощи Flickity создание отзывчивых слайдеров превращается в легкую работу, так как в плагине есть все инструменты для реализации любой идеи. Плагин условно бесплатный, для использования в коммерческих проектах придется приобрести платную версию.

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

50 Most Popular jQuery Plugins From 2020

hummingbird-treeview.js – Tiny and Fast jQuery TreeView Plugin

hummingbird-treeview.js is a tiny and fast jQuery treeview plugin.

Features

  • Display hierarchical tree structures.
  • Based on simple pseudo HTML lists or full HTML structures.
  • Tri-state logic.
  • Manual and programmatical check, uncheck, collapse, expand, etc.

lax.js – Beautiful and Smooth Scroll Effects with Javascript

lax.js is a lightweight and simple vanilla javascript plugin to create beautiful and smooth animations when you scroll.

PixiJS – HTML5 Creation Engine

PixiJS is the HTML5 creation engine that you can create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Frappe DataTable – Modern and Interactive Datatable Library

Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data.

It can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation.

tabler – Free and Open Source Dashboard Template Built on Bootstrap

Tabler is a premium, free and open source dashboard template with responsive and high quality UI. Tabler is built on Bootstrap.

x-spreadsheet – Web Based JavaScript Spreadsheet

x-spreadsheet is a web-based JavaScript (canvas) spreadsheet.

Artplayer.js – Modern HTML5 V > May 22, 2020 867

Artplayer.js is a modern and full featured HTML5 video player.

Editor.js – Next Generation Block-Styled Editor

Editor.js is a block-styled editor that outputs clean data in JSON instead of heavy HTML-markup. Editor.js is designed to be API extendable and pluggable.

Cube.js – Open Source Serverless Analytics Framework

Cube.js is an open source serverless analytics framework that is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.

Scrollpup.js – Scroll Progress Bar with Javascript

Scrollpup.js is a tiny javascript library to create responsive scroll progress bar.

Pill – Add Dynamic Content Loading to Static Site

Pill is a tiny javascript library that adds dynamic content loading to static sites and makes content loading smooth for users.

Layer Motion Sl > January 27, 2020 788

A tutorial about creating another CSS Grid-powered slideshow — show and hide images with a reveal effect and add a parallax like effect to the main image and the title. TweenMax is used for the animations.

Brain.js – JavaScript Library for Building Neural Networks

Brain.js is a JavaScript library for building Neural Networks in the browser and in Node.js

Custom Cursor Effects Tutorial

A tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels, included with 5 demos.

FlexSearch – Next-Generation Full Text Search Library

FlexSearch.js is a fastest and most memory-flexible full-text search library with zero dependencies. It also provides flexible search capabilities like multi-word matching, phonetic transformations or partial matching.

html2canvas – Screenshots with JavaScript

html2canvas is a javascript library that allows you to take screenshots of webpages, directly on the users browser.

Proton – Javascript Particle Engine

Proton is a lightweight and powerful javascript particle engine that can easily create countless cool effect.

pdfmake – Client/Server S > June 28, 2020 624

pdfmake is a PDF document generation library for server-side and client-side in pure JavaScript. pdfmake works in-browser, fully declarative and has powerful layout engine.

Sol > April 07, 2020 615

Solid is a declarative, flexible and efficient Javascript library for creating user interfaces. Solid is lightweight and supports features like JSX Fragments, Portals, Suspense, and Asynchronous Rendering.

JS Cloudimage 360 View for Your Products

JS Cloudimage 360 View is a simple, interactive resource that can be used to provide a virtual tour of your product.

Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog is a 3D JavaScript engine for and SVG. You can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes.

sql.js – SQLite Compiled to JavaScript

sql.js is a port of SQLite to Webassembly, by compiling the SQLite C code with Emscripten. It uses a virtual database file stored in memory, and thus doesn’t persist the changes made to the database.

FullScreen Sl > April 23, 2020 579

fullscreen-slider is an asset that resizes sections in a page to fullscreen resolution and moves these individually by wheel/touch events.

Bootprompt – Alert, Confirm and Dialog Boxes with Bootstrap

Bootprompt is an alert, confirm and flexible dialog boxes for Bootstrap. Bootprompt supports the same range of browsers as Bootstrap 4.

buha.js – Browser Based Task Queue for Sync/Async Javascript Functions

buha.js is a lightweight and browser based strictly ordered task queue for sync/async javascript functions.

sl > August 04, 2020 511

slider-x is a jQuery plugin to create a simple and awesome slider and carousel.

AlaSQL – JavaScript SQL Database Library

AlaSQL.js a JavaScript SQL database that handles both traditional relational tables and nested JSON data (NoSQL).

You can export, store, and import data from localStorage, IndexedDB, or Excel.

Device Selector – jQuery Plugin to Get the Current Device Information

js.device.selector is an ES6 class and jQuery plugin to get the current device type and display type of a browser while making CSS breakpoints available in JavaScript.

ppo – Tiny and Useful Utils Library for JavaScript

ppo is a super small and useful utils library for JavaScript just like lodash, underscore and lazy.js

ppo contains most frequently used function functions in daily development.

Date Range Picker – JavaScript Date Range Picker Component

Date Range Picker is a javascript date range, date and time picker component.

Features

  • Limiting the selectable date range,
  • Localizable strings and date formats
  • Single date picker mode
  • Time picker
  • Predefined date ranges

Sl > January 13, 2020 474

Slidey Radios is a concept for creating sliding (swappy) radio button by using css and javascript.

Pampy.js – Pattern Matching for JavaScript

Pampy.js is a tiny, reasonably fast, and often makes your code more readable, and easier to reason about.

Airframe React – Free & High Quality Dashboard Template Based on Bootstrap & React

Airframe React is a free open source high quality dashboard / admin / analytics template based on Bootstrap 4 & React. It works great on any smartphone, tablet or desktop.

Also jQuery version is available.

Croppie – jQuery Image Cropper

Croppie is a fast, easy to use jQuery image cropping plugin with many configuration options.

Musical Bubble Sort with Animation

A cool tutorial about creating animated and musical Bubble Sort by using Vue.js

PDFKit – JavaScript PDF Generation Library for Node and Browser

PDFKit is a PDF generation library for Node and the browser that makes creating complex, multi-page, printable documents easy.

The API embraces chainability, and includes both low level functions as well as abstractions for higher level functionality.

Vant – Mobile UI Components Built on Vue

Vant is a lightweight mobile UI components library built on Vue.

Features

  • 60+ Reusable components
  • 90% Unit test coverage
  • Extensive documentation and demos
  • Support babel-plugin-import

tinydate – Fast and Tiny Reusable Date Formatter

tinydate is a tiny and reusable date formatter. It’s also extremely fast!

FBT – JavaScript Internationalization Framework

FBT is an internationalization framework for JavaScript designed to be both powerful and flexible, but also simple and intuitive.

jsdiff – JavaScript Text Differencing Implementation

jsdiff is a javascript text differencing implementation of the algorithm proposed in «An O(ND) Difference Algorithm and its Variations» (Myers, 1986).

jQuery Disable Auto Fill Plugin

Disable Auto Fill is a jQuery plugin for disabling Google Chrome auto-fill, auto-complete functions.

D2Admin – An Elegant Open Source Dashboard

D2Admin is a fully open source and free back-end product front-end integration solution. It’s using the latest front-end technology stack.

Features

  • Build with vue-cli3
  • First screen loading waiting animation
  • Five themes
  • Built-in UEditor rich text editor

Ola – Smooth Animation Library for Interpolating Numbers

Ola is a smooth animation library for inbetweening / interpolating numbers in realtime.

gandul – Accessible Image Lazy Loading

gandul is a lightweight javascript module that adds a different approach on lazy loading focusing on accessibility.

  • Making you drop the src attribute of the image
  • Making you create a base64 data / low resolution blurred alternative version of the image
  • Including the img element into a tag.

Faker.js – Generate Massive Amounts of Fake Data in the Browser and Node.js

Faker.js is a project to generate massive amounts of realistic fake data in Node.js and the browser.

React Big Calendar – Google Calendar/Outlook Like Calendar Component

react-big-calendar is a Google Calendar/Outlook like events calendar component built for React and made for modern browser and uses flexbox over the classic tables-ception approach.

Search UI – Search Interface That Simply Works by Elastic

Search UI is a react library by Elastic that allows you to quickly implement search experiences without re-inventing the wheel. Use it with Elastic App Search or Elastic Site Search to have a search experience up and running in minutes.

Search UI puts components like Dynamic Filters and Facets, Search Bar, Result Feed Layouts, and Autocomplete at your disposal.

Relay – JavaScript Framework for Building Data-Driven React Applications

Relay is a JavaScript framework for building data-driven React applications.

Gatsby – Blazing Fast Modern Site Generator for React

Gatsby is a free and open source framework based on React that helps developers build blazing fast modern websites and apps.

DPlayer – HTML5 Danmaku V > September 17, 2020 276

DPlayer is a HTML5 danmaku video player to help people build video and danmaku easily.

Features

  • Danmaku
  • Screenshot
  • Hotkeys
  • Quality switching
  • Thumbnails
  • Subtitle

Лучшие jQuery плагины и JavaScript решения 2020 года

10 лет назад, когда jQuery только зарождалась, браузерная экосистема была очень разношерстной и каждый из существовавших тогда продуктов по своему боролся со сложностью управления DOM-элементами. Амбициозной задачей, которую поставили перед собой разработчики jQuery, была разработка универсального подхода к решению этих проблем и создание API, который бы одинаково хорошо работал в любой ситуации.

Топ-пост этого месяца:  Языки программирования для веб-разработки сайтов и приложений

Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.

Сам JavaScript сейчас совершенно зрелый продукт, хорошо документированный и поддерживаемый всеми современными браузерами. Современное браузерное сообщество тоже более консолидировано и, в большинстве случаев, можно быть уверенным, что если, скажем, страница корректно отображается в Crome, то так же она будет выглядеть и в Firefox. querySelectors тоже поддерживаются практически всеми современными браузерами.

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

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

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

multiscroll.js

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

jquery.email-autocomplete.js

Электронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.

tinyDatePicker

В 5 кБ этого плагина втиснуты немаленькие возможности. Календари, планировщики, бронирование товаров и услуг — далеко не полный перечень, где можно использовать tinyDatePicker. Быстрый, легкий, масштабируемый — его можно легко интегрировать в Bootstrap или любой другой фреймворк.

Push.js

Кросс-браузерный плагин для отображения уведомлений на рабочем столе.

ReadRemaining.js

Многим из нас всегда катастрофически не хватает времени. Я всегда завидовал людям, которые умеют правильно им распоряжаться. Наверное, к таким относится автор плагина ReadRemaining.js. Кому же еще могла прийти в голову мысль вывести рядом с текстом информацию о том, сколько времени вам понадобится, чтобы прочитать его. И по мере прокрутки текста пересчитывать это время, основываясь на скорости чтения конкретного пользователя.

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

Tooltipster

Классическая всплывающая подсказка (tooltip) с большим набором функций и опций. Сам элемент может располагаться где угодно по отношению к родительскому элементу и содержать какие угодно элементы. Главное, не переборщить с его применением, используйте его только там где это действительно необходимо.

TableExport.js

Здесь все ясно из названия. Плагин позволяет просто и быстро конвертировать HTML-таблицу в файл Exel, CSV или обычный текстовый. Для работы требуется плагин FileSaver.js.

Addel

Несмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение — динамически добавлять или скрывать HTML-элементы, в первую очередь элементы форм. Управление гибкое и интуитивно понятное.

Chart.js

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

jQuery Flip-Quote

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

Sharetastic

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

Algolia Places

Быстрый поиск с автодополнением почтовых адресов, городов, маршрутов и всего, что связано с локациями по всему миру благодаря интеграции с базой данных OpenStreetMap. Очень полезный плагин для интернет-магазинов.

HideSeek

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

Timedropper

Существует огромное количество удобных решений для ввода определенного момента времени. Однако Timedropper выделяется среди них простотой и легким управлением. Изменение часов и минут при помощи этого забавного язычка действительно удобно. Он имеет несколько параметров настройки, таких как: формат времени (12 или 24-часовой), цвет циферблата, теста, фона, а также возможность изменять показания часов и минут при помощи колесика мыши. Кстати, имеется аналогичный плагин для задания даты.

Choreographer-js

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

Leaflet.js

Занимая всего 33 кБ, эта библиотека предоставляет практически все функции, необходимые для работы с картами, в том числе и на мобильных устройствах.

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

CurrencyFormatter.js

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

Своеобразный шаблон для проектирования интерфейсов в стиле Atomic Design.

Небольшой набор интересных и необычных элементов управления, построенных на jQuery.

Shave.js

Javascript, который аккуратно обрежет текст, не помещающийся в контейнер заданной высоты. Занимает всего 1,5 кБ и не требует сторонних библиотек.

jQuery Linechart

Библиотека для построения диаграмм различных видов и довольно большим количеством исходных данных. Написан на HTML/CSS/JS, однако есть версия и на базе Angular.js

Tabulator

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

baguetteBox.js

Написанный на чистом JavaScript lightbox с хорошей поддержкой мобильных устройств и управлением жестами.

Freewall

Невероятно красивый jQuery плагин для создания плиточного интерфейса в самых разных стилях: Windows Metro, Pinterest, обычном плоском или иерархическом, с перетаскиваемыми и динамически добавляемыми элементами. Отлично работает как на мобильных браузерах, так и на десктопных, включая IE8. Действительно универсальный инструмент!

rowGrid.js

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

Slidebars

Slidebars добавляет на страницу сайта меню или боковую панель, которые скользящим движением появляются или скрываются по нажатию курсором на управляющую кнопку. Версия 2 этого плагина была полностью переписана и теперь может содержать неограниченное количество самых разных элементов. Имеет полноценный API, возможность подключения собственных callback-функций и подписку на события.

pagePiling.js

Очень напоминает рассмотренный в данном обзоре плагин multiscroll.js, но страница не разбивается на две панели, а смещается целиком. Можно изменять направление смещения и скорость. Хороший выбор для одностраничного сайта, который будет одинаково хорошо выглядеть и на мобильный устройствах и на больших экранах.

Animsition

Основной целью Animsition является воплощение в одном плагине большого и разнообразного набора различных транзитивных эффектов. Среди них затухание и проявление, вращение, отражение, зуммирование и т.п. (всего 58 штук).

ZooMove

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

Rippleria

Легковесный плагин, создающий волновой эффект (похожий на рябь на поверхности воды) на любом DOM-элементе: кнопке, элементе DIV, картинке. Очень легко настраивается и управляется.

Flickity

Быстрый, адаптивный и управляемый жестами слайдер. Внешне — довольно обычный, но с невероятно тщательно написанной и структурированной документацией. Полноценный, и продуманный API.

Unslider

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

Lightcase.js

Выдающийся lightbox с CSS3 анимацией. Работает с DIV, изображениями, текстом, flash-объектами, video и iframe. Пока не поддерживает jQuery 3, но разработчики обещают исправить это в ближайших релизах.

PhotoSwipe

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

Strip

Strip — это lightbox, который занимает некоторую область страницы, оставляя саму страницу не только частично видимой, но и доступной для взаимодействия с ней. Кроме того может одновременно работать и как слайдер. К тому же, наряду с изображениями, поддерживает и видеоконтент с Youtube и Vimeo.

Turntable.js

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

Vide.js

Пожалуй, самый простой способ добавить фоновое видео на страницу сайта — это воспользоваться плагином Vide.js. Он работает на всех современных браузерах, начиная с IE9+. На iOS и Android, которые не всегда воспроизводят фоновое видео, будет показан стоп-кадр.

Trianglify

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

LazeeMenu

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

Web-ticker

Бегущая строка, похожая на те, которые часто можно увидеть на экране телевизора в выпусках новостей — последние события, биржевые котировки, погода… Да мало ли, что там можно разместить! Так, что если вам нравится такой способ подачи информации — возьмите Web-ticker на заметку.

Inputmask

User experience в действии. Вы помните те времена, когда приходилось заново вводить в форму данные из-за ошибки. Причем ошибка обнаруживалась только после ответа сервера. Забудьте об этом! Inputmask не просто контролирует и отображает визуально правильность вводимых данных, он еще и препятствует введению неправильных. Попробуйте, например, ввести 13-й месяц в поле даты. Маски могут быть самые разные — даты, телефоны, e-mail и даже регулярные выражения.

ScrollReveal

Суперлегкий, адаптированный как к десктопным, так и к мобильным браузерам скрипт для эффектной скроллинговой анимации.

Marginotes

Всплывающие подсказки (tooltip), отображаемые на полях рядом с абзацем. Интересное и оригинальное решение. Если вы не любитель jQuery, то имеется версия, не требующая этой библиотеки.

Loud Links

Java-скрипт, который позволяет «озвучить» ваш сайт — добавить звуковые эффекты на различные события. Использует аудио-элемент HTML5 и способен воспроизводить MP3 и OGG файлы.

Bricks.js

Молниеносный, в смысле скорости работы, плагин для создания плиточной верстки фиксированной ширины.

MediumEditor

Маленький (28кБ) и легкий inline редактор для изменения атрибутов текста непосредственно на странице. Позволяет подключать дополнения и различные скины.

Philter

Philter предоставляет удобное и гибкое управление CSS-фильтрами при помощи HTML-атрибутов. Поставляется в виде плагина к jQuery или скрипта на чистом JavaScript.

SuperEmbed.js

Обнаруживает на странице встроенное видео и помещает его в адаптивный контейнер.

Substance

Полноценный текстовый редактор для онлайновых издательских систем.

List.js

Позволяет сортировать, фильтровать и производить поиск по элементам списков, таблиц и другим элементам HTML

jqGifPreview

Создает стоп кадр анимированного GIF-файла, точно так же, как это сделано в FaceBook.

Datedropper.js

Симпатичный и удобный jQuery-плагин для быстрого указания даты.

jfMagnify

Плагин увеличительное стекло на базе jQuery. Способен увеличивать любой HTML-элемент, а не только изображение.

jQuery formBuilder

Быстрое и удобное создание форм — достаточно просто перетащить на форму требуемые элементы.

Popper.js

Несмотря на свой размер 4кБ эта библиотека-малютка создает эффектные и умные всплывающие подсказки (tooltip), которые могут быть расположены с любой стороны элемента, а также самостоятельно менять это положение в зависимости от расположения родительского элемента относительно границы страницы.

Image Blur Plugin

Легкий кросс-браузерный плагин jQuery для получения расфокусированного изображения.

InlineTweet.js

Превратить любой текст в Twitter-ссылку — дело одной секунды при помощи InlineTweet.js

iMissYou.js

iMissYou.js изменяет заголовок вкладки и favicon, когда пользователь переключается на другую вкладку.

SweetAlert2

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

Force.js

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

Bideo.js

Неплохая библиотека для добавления фонового видео на страницу вашего сайта.

Microlight.js

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

flatpickr

Быстрый и функциональный элемент интерфейса для ввода даты, времени или и того и другого вместе.

anime.js

Гибкая и легкая библиотека различных анимационных эффектов, воздействующая на селекторы CSS, SVG, атрибуты DOM и другие JS-объекты.

Cleave.js

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

Skippr

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

Lightgallery.js

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

iziModal.js

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

Rusability

Галереи изображений и слайдеры – одни из самых популярных форматов jQuery. Благодаря им вы можете добавить на сайт необходимый объем визуального контента, экономя при этом ценное место.

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

В сегодняшней статье мы собрали для вас лучшие галереи изображений и слайдеры jQuery.

Для их установки достаточно добавить выбранные плагины в раздел head HTML страницы вместе с библиотекой jQuery и настроить их согласно документации (всего пара строчек кода).

Выбирайте, какой из этих элементов идеально впишется в ваш проект.

1. Bootstrap Slider

Bootstrap Slider – бесплатный, оптимизированный под мобильные устройства слайдер изображений с прокруткой прикосновением и смахиванием. Он будет потрясающе смотреться на любом экране и в любом браузере. Вы можете загрузить в слайдеры изображения, видео, текст, миниатюры и кнопки.

2. Product Preview Slider

Product Preview Slider воплощает в себе весь потенциал jQuery, он отлично встраивается в любой интерфейс. Также вас порадует качество и чистота кода этого плагина.

3. Expandable Image Gallery

Expandable Image Gallery – потрясающий плагин, который одним кликом мышки превращается в полноэкранную галерею. Его можно использовать для раздела “О нас” или для просмотра информации о товарах.

4. Fotorama

Fotorama – плагин отзывчивой галереи jQuery, который работает как для десктоп, так и для мобильных браузеров. Он предлагает множество опций навигации: миниатюры, прокрутку, кнопки “вперед” и “назад”, автоматический показ слайд-шоу и маркеры.

5. Immersive Slider

Immersive Slider позволяет создавать уникальный опыт просмотра слайдов, похожий на слайдер Google TV. Вы можете изменить фоновое изображение, которое будет размыто для сохранения фокуса на основных фото.

6. Leastjs

Leastjs – отзывчивый jQuery плагин, который поможет вам создать потрясающую галерею. При наведении курсора на изображение, появляется текст, при нажатии окно разворачивается на весь экран.

7. Sliding Panels Template

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

8. Squeezebox Portfolio Template

Squeezebox Portfolio Template предлагает motion-эффекты для портфолио. При наведении курсора на основное изображение (или блок) появляются привязанные элементы.

9. Shuffle Images

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

10. Free jQuery Lightbox Plugin

Free jQuery Lightbox Plugin поможет вам показать одно или несколько изображений на одной странице. Также их можно будет увеличить и вернуть к исходному размеру.

11. PgwSlider – Responsive slider for jQuery

PgwSlider – минималистичный слайдер изображений. jQuery код весит немного, поэтому скорость загрузки этого плагина вас приятно удивит.

12. Scattered Polaroids Gallery

Scattered Polaroids Gallery – потрясающий слайдер, выполненный в плоском дизайне. Его элементы хаотично движутся при переключении изображений, что выглядит потрясающе.

13. Bouncy Content Filter

Bouncy Content Filter – идеальное решение для интернет-магазинов и портфолио. Этот плагин позволяет пользователям быстро переходить из одной категории в другую.

14. Simple jQuery Slider

Simple jQuery Slider оправдывает свое название. Этот плагин сочетает в себе элементы JavaScript, HTML5 и CSS3. В демо по умолчанию доступна только загрузка текста, но если внести несколько изменений, можно будет добавить и визуальный контент.

15. Glide JS

Glide JS – простой, быстрый и отзывчивый jQuery слайдер. Его легко настроить, к тому же плагин не займет много места.

16. Fullscreen drag-slider with parallax

Этот потрясающий jQuery слайдер с возможностью загрузки изображений и текста подойдет для любого сайта. Он порадует пользователей легким parallax эффектом и медленным появлением текста.

17. Sliiide

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

18. Zoom Slider

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

19. Prism Effect Slider

Prism Effect Slider – отличный плагин для блогеров. Этот слайдер позволяет добавить логотип на каждое изображение, который меняется при прокрутке.

20. Responsive Parallax Drag-slider With Transparent Letters

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

Галереи и слайдеры – отличное решение для современных сайтов. Они позволяют экономить место на странице, улучшают юзабилити и опыт пользователей, а интересная анимация и эффекты сделают ваш проект запоминающимся.

Создание плагина jQuery

Материал из JQuery

Создание файла с плагином и его подключение

Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js. Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js.

Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:

Основа для плагина

Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин — responsiveBlock:

Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию (подробности см. в описании jQuery.noConflict()):

Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:

Добавление свойств плагину

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

(Для лучшего понимания данного примера стоит ознакомиться с назначением функции $.extend).

Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).

Дальнейшая реализация

Далее, добавим окончательную реализацию нашему плагину и применим ее на конкретном примере:

Генерация событий

Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger(), а устанавливать их обработчики можно с помощью .on(). Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.

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

В нашем плагине можно организовать событие stateChange, которое будет происходить при смене состояния элемента (наведен курсор или нет):

Примечания

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

Добавить комментарий