Добейтесь большего, написав меньше кода
JQuery, используемая более чем 70% из 100 тыс. Лучших веб-сайтов в мире, возможно, является самой популярной библиотекой JavaScript для интерфейсной разработки.
Он быстрый, легкий и упрощает навигацию по HTML-документу и управление элементами страницы.
Поскольку он также обладает высокой расширяемостью, существует множество плагинов jQuery, построенных поверх фреймворка для добавления функциональности веб-сайтам. От компонентов и элементов пользовательского интерфейса до макетов и сеток - есть плагин jQuery для практически любых функций, которые требуются вашему веб-сайту.
Вот список некоторых из моих любимых плагинов jQuery (в произвольном порядке), которые могут оказаться полезными для вашего следующего веб-проекта!
Макеты
Первые два плагина в нашем списке служат более общей цели и помогают нам создавать гибкие и аккуратные макеты.
1) Изотоп
Основные функции: схемы сеток и кирпичной кладки, расширенная фильтрация, настраиваемые фильтры, сортировка.
Простота использования: ✔️✔️✔️
Я наткнулся на эту жемчужину плагина через тему Wordpress, которая использовала его для создания фильтруемых сеток для отображения элементов портфолио.
С помощью Isotope вы можете создавать элементы сетки различных размеров и удобно размещать их в макете кладки.
Но это еще не все.
Вы также можете фильтровать и сортировать элементы сетки. Самым большим преимуществом Isotope является возможность указывать настраиваемые функции для фильтрации и гибкость сортировки с различными атрибутами данных.
2) matchHeights
Основные функции: динамическое создание блоков контента одинаковой высоты.
Простота использования: ✔️✔️✔️✔️️✔️️
Возникли проблемы с тем, чтобы все столбцы Bootstrap имели одинаковую высоту?
Чаще всего реальный контент не бывает красивой и равной длины. И прежде чем вы это заметите, у вас есть блоки разных размеров, нарушающие исходный дизайн. 😩
Но не беспокойтесь.
Вот решение Javascript, чтобы спасти положение.
Взяв за основу самый высокий элемент, matchHeights заставляет все выбранные элементы соответствовать высоте их высокого брата. Больше никаких непредсказуемых разрывов макета из-за неровного содержимого!
Стоит отметить, что плагин требует, чтобы контент был загружен, прежде чем можно будет сделать точную оценку высоты элементов.
Карусели
Карусели или слайдеры изображений сделают ваш сайт стильным «приветственным» ковриком.
Качественно выполненная карусель на главной странице может продемонстрировать лучшее из содержания сайта и побудить пользователей остаться для дальнейшего изучения.
Эти 2 рекомендуемых плагина jQuery carousel обязательно помогут вам произвести неизгладимое впечатление.
3) Совиная карусель
Основные функции: слайдеры HTML, адаптивные параметры, настраиваемые переходы между слайдами, отложенная загрузка, синхронизация нескольких слайдеров, загрузка данных из объектов JSON.
Простота использования: ✔️✔️✔️✔️
Owl Carousel возглавляет список плагинов jQuery carousel для создания функциональных и отзывчивых слайдеров.
Плагин может похвастаться обширными возможностями настройки, включая адаптивные режимы (количество слайдов для отображения в определенных точках останова), параметры слияния для слайдов разной ширины и переходы между слайдами на основе CSS.
Настраиваемые переходы между слайдами
В частности, возможность настраивать переходы между слайдами с помощью CSS - одна из его уникальных особенностей. Благодаря этой функции мы не ограничены обычными скользящими и плавными переходами между слайдами.
4) Скользящий слайдер
Основные функции: слайдеры HTML, адаптивные параметры, ползунки переменной ширины, фильтрация слайдов, бесконечный цикл, синхронизация нескольких слайдеров.
Простота использования: ✔️✔️✔️✔️✔️
Slick Slider удобнее для новичков благодаря лаконичной одностраничной документации, которой легко следовать и которая заполнена рабочими примерами.
Если вы новичок в адаптивных ползунках, то лучше всего с этого.
С помощью этого плагина мы можем гибко объявлять точки останова и количество слайдов, отображаемых в каждой точке останова.
Слайд-фильтрация
Мы также можем фильтровать и отображать выбранные слайды динамически, используя методы обратного вызова событий.
Формы
Единственная цель формы, используемой для входа в систему, регистрации пользователей и оставления отзывов, - сбор информации от посетителей вашего веб-сайта.
Чтобы улучшить внешний вид общей формы, мы могли бы стилизовать элементы формы, чтобы они выглядели более гладкими, чем те, которые по умолчанию отображаются в браузере.
Хотя элементы input и textarea можно довольно легко стилизовать с помощью базового CSS, настройка других элементов формы, таких как флажки, переключатели и элементы раскрывающегося списка выбора, не так проста.
Кроме того, элементы управления по умолчанию отображаются по-разному в разных браузерах и операционных системах.
К счастью, существуют плагины jQuery, которые могут помочь нам украсить наши элементы формы во всех браузерах. Вот 2.
5) iCheck
Основные функции: стилизованные и настраиваемые скины для флажков и переключателей.
Простота использования: ✔️✔️✔️
ICheck помогает нам настраивать флажки и переключатели с помощью их стильных обложек, которые бывают нескольких вкусов и цветов - минимальный, квадратный, плоский, футурико и полярис.
Если ни один из вышеперечисленных дизайнов не пощекотал ваше воображение, у вас также есть возможность использовать собственный скин.
Обратной стороной этого плагина является ограниченный выбор цвета в предоставленных скинах. Поскольку скины создаются с использованием спрайтов изображений, невозможно изменить цвет флажков или переключателей с помощью кода.
Чтобы решить эту проблему, нужно изменить спрайт изображения и изменить его цвет с помощью программного обеспечения для редактирования изображений.
6) Селектрик
Ключевые функции: легко настраиваемые <select> элементы, заполнение параметров с помощью AJAX, динамическое добавление / удаление параметров, обратные вызовы событий
Простота использования: ✔️✔️✔️✔️
Selectric - это эквивалент iCheck для настройки select раскрывающихся меню.
Помимо множества загружаемых тем, мы также можем предоставить настраиваемую тему CSS, чтобы стилизовать наш select так, как мы этого хотим.
Но это не самое лучшее.
Что замечательно в этом плагине, так это возможность динамического управления параметрами в элементе select. Это означает, что вы можете легко добавлять, изменять или удалять параметры с помощью методов плагина без необходимости использования сложного исходного кода JavaScript. В довершение ко всему, мы также можем заполнить параметры выбора через источник данных AJAX.
Два больших пальца вверх за все эти удивительные функции! 👍👍
7) Проверка jQuery
Ключевые функции: проверка формы на стороне клиента, настраиваемые сообщения об ошибках, настраиваемые правила проверки.
Простота использования: ✔️✔️
Этот плагин немного отличается от двух других плагинов форм. JQuery Validation имеет дело с проверкой формы, а не с элементами формы. Возможно, это не самый простой плагин в использовании.
Но это ОБЯЗАТЕЛЬНО для всех веб-разработчиков!
Пока форма существует на веб-сайте, проверка формы необходима для предотвращения ошибочных ответов или потенциальных кибератак.
Хотя внутренняя проверка абсолютно необходима (проверки выполняются сервером), стоит больше kiasu и проверять как внутреннюю, так и внешнюю стороны. Кроме того, зачем нагружать свой сервер таким количеством попыток отправки формы, когда есть способ отфильтровать легко обнаруживаемые ошибки с помощью проверки на стороне клиента (проверки выполняются в браузере)?
Пользовательские правила проверки
Вам нужно будет использовать это, если поле ввода не попадает в одну из распространенных категорий проверки, таких как формат электронной почты, максимальное количество символов, правильно сформированные URL-адреса и т. Д.
Например, у вас может быть NRIC или поле местного номера телефона, для проверки которого требуются специальные правила.
Для определения этих правил может потребоваться некоторое знание регулярных выражений, что, вероятно, является самой сложной частью использования этого плагина. Вот изящный инструмент, который можно попробовать, если регулярное выражение не для вас.
Визуализация данных
Мы часто используем таблицы и диаграммы для представления научных или статистических данных.
В веб-приложениях, которые включают визуализацию больших данных (тысяч или даже миллионов строк), одна из наиболее важных вещей, на которые следует обратить внимание в плагине таблиц или диаграмм, - это способность «справляться с нагрузкой». Обычно это достигается путем разбивки на страницы и загрузки данных через источник данных AJAX.
Помимо множества функций, следующие плагины таблиц и диаграмм отлично поддерживают обработку больших данных. Их настоятельно рекомендуется использовать в инструментах аналитики, информационных панелей и статистики.
8) Таблицы данных
Ключевые функции: таблицы с разбивкой на страницы, поиск, сортировка, упорядочение по нескольким столбцам, получение данных из нескольких типов источников данных, поддержка AJAX, скрытие / отображение столбцов, интеграция начальной загрузки.
Простота использования: ✔️✔️
С помощью DataTables сортировка и поиск по строкам и столбцам таблиц так же просто, как инициализация плагина с указанным <table> ID.
По умолчанию jQuery DataTable разбивается на страницы с функциями сортировки по каждому столбцу. Он также имеет поле поиска в правом верхнем углу, чтобы помочь вам быстро просеять ряды.
Этот плагин предлагает множество других дополнительных функций, таких как настраиваемая сортировка, динамическое скрытие и отображение строк таблицы и т. Д. Просмотрите документацию и примеры, чтобы увидеть его потенциал.
9) Highcharts
Ключевые функции: высокоинтерактивные диаграммы, широкий спектр типов диаграмм, анимированные диаграммы, всплывающие подсказки к точкам данных, настраиваемые темы, поддержка AJAX.
Простота использования: ✔️✔️✔️✔️
Highcharts предлагает широкий спектр типов диаграмм, включая базовые линейные и гистограммы, точечные диаграммы, круговые диаграммы, диаграммы с областями, тепловые карты, ящичные диаграммы, радарные диаграммы, комбинированные диаграммы и т. Д.
Создавайте интерактивные и красивые диаграммы с легкостью, используя всего несколько параметров, и voilà у вас есть рабочая панель для представления.
Плагин имеет удобный раздел демонстрации, который иллюстрирует использование каждого типа диаграммы с соответствующими JSFiddles (фрагменты живого кода).
Карты
Мы завершаем этот пост удобным плагином для картографии, с помощью которого вы можете добавить Карты Google на веб-сайт.
10) gmap.js
Основные возможности: карты Google с маркерами, геолокацией, геокодированием, поддержкой JSON, наложениями и маршрутами.
Простота использования: ✔️✔️✔️✔️
Попрощайтесь с перевариванием обширной документации и написанием фрагментов кода для отображения карты Google на вашем веб-сайте. gmaps.js устраняет всю эту сложность и позволяет заполнить самое необходимое.
Например, если вам нужна карта, все, что нужно, - это идентификатор карты div, на котором будет отображаться карта, а также широта и долгота местоположения.
Он также имеет другие функции, такие как добавление маркеров (даже пользовательских), отображение маршрутов, геолокация (получение координат текущего пользователя) и геокодирование (ввод адреса для получения широты и долготы). .
Есть любимый?
Список замечательных плагинов jQuery на этом не заканчивается. Фактически, он постоянно расширяется, поскольку новые плагины пишутся для улучшения существующих или для добавления новых функций в местах, которых никогда раньше не было.
Надеюсь, вы нашли хотя бы один из плагинов в списке полезным. Не стесняйтесь поделиться некоторыми из своих любимых!
