Мастер форм jQuery — это плагин jQuery, который помогает создавать формы с каким-то потоком форм (без обновления страницы). Например, если у вас была большая форма для ввода пользовательских данных, вы можете использовать мастер форм, чтобы разделить ее на ряд связанных шагов. Преимущество этого заключается в том, чтобы не перегружать пользователей действительно длинной формой, а также давать им некоторое представление об их прогрессе при вводе информации.
В этом посте мы перечислим 6 наших любимых мастеров форм jQuery, рассмотрим их различные функции и, наконец, рассмотрим несколько платных опций, а также способы их создания. Этот список не является исчерпывающим, но если вы ищете мастера форм jQuery, то, надеюсь, это укажет вам правильное направление.
Этот популярный пост был обновлен 30.08.2017. Разбитые / заброшенные плагины были удалены из списка, и были добавлены новые плагины, чтобы отразить функции, которые люди просили в комментариях.
1. jQuery Steps
jQuery Steps — это интеллектуальный компонент пользовательского интерфейса, который позволяет легко создавать интерфейсы в стиле мастера. Этот плагин группирует контент по разделам для более структурированного и упорядоченного просмотра страниц. Он обладает множеством функций, таких как асинхронная загрузка содержимого, сохранение состояния (сохраняет входные данные между этапами) и эффекты перехода между разделами. Он может быть установлен через NuGet или Bower и имеет хорошо документированный и многофункциональный API.
Домашняя страница | GitHub | демонстрация
2. JQuery Smart Wizard
Smart Wizard — гибкий и настраиваемый плагин пошагового мастера jQuery с поддержкой Bootstrap. Его легко реализовать, он предоставляет аккуратный и стильный интерфейс для ваших форм, экрана оформления заказа, шагов регистрации и т. Д. В его функции входит поддержка тем (с различными темами), навигация по URL и выбор шагов, а также возможность динамически скрывать или отключать шаги. Он может быть установлен через npm, bower или composer и имеет хорошо документированный и многофункциональный API.
Домашняя страница | GitHub | демонстрация
3. formToWizard
Этот легкий плагин превращает любую веб-форму в многошаговый мастер с jQuery, в результате чего каждая форма <fieldset> превращается в отдельный шаг с помощью кнопок «вперед» и «назад». Он имеет не так много функций, как предыдущие два плагина, но интегрируется с плагином проверки jQuery для обеспечения функциональности проверки. Это один файл (так что вы можете просто взять его с GitHub и перейти), и если JavaScript недоступен, он изящно ухудшается.
4. jQuery Stepy
jQuery Stepy — это плагин, который генерирует настраиваемый мастер форм. Предполагается, что ваша форма имеет определенную структуру разметки и что в разметке доступны определенные классы. После этого вам просто нужно инициализировать плагин и вуаля — у вас есть мастер формы.
Плагин не поставляется с предустановленными стилями. Тем не менее, он имеет множество опций, таких как возможность перемещаться между шагами, предлагая кнопки вперед , назад и конец , эффекты перехода и интеграцию с любым плагином проверки по вашему выбору. Он предлагает разумный API, который, например, позволяет запускать обратный вызов между шагами или запускать обратный вызов при визуализации текущего шага.
5. Мастер начальной загрузки Twitter
Этот плагин Twitter Bootstrap создает мастер с использованием отформатированной структуры с вкладками. Это позволяет пользователям создавать функциональные возможности мастера с помощью кнопок, чтобы проходить через различные этапы мастера и события, чтобы подключаться к каждому шагу индивидуально. Основным преимуществом этого плагина является его тесная интеграция с Bootstrap. Он поставляется с некоторыми базовыми функциями, такими как проверка, индикатор выполнения и возможность программного включения и удаления шагов. Помимо простого клонирования плагина из GitHub, его также можно установить через Bower (хотя это не рекомендуется ). Он достаточно хорошо документирован и предлагает базовый API.
Домашняя страница | GitHub | демонстрация
6. jQuery.wizard
И, наконец, под номером шесть у нас есть jQuery.wizard. Это мастер асинхронной формы, который поддерживает ветвления — что-то запрошенное людьми в комментариях.
Базовая структура мастера вращается вокруг шагов и ветвей, причем последний является необязательным. Простая линейная форма может потребовать только одну ветвь, которая содержит все шаги, тогда как сложная форма может потребовать использования нескольких ветвей или даже вложенных ветвей. Таким образом, количество шагов и ветвей в форме полностью остается за разработчиком. Мастер использует асинхронный конечный автомат, который определяет, как перемещаться через себя.
Этот плагин исключительно хорошо документирован и предлагает обширный API. Он может быть установлен через npm или Bower и полностью совместим с Internet Explorer 6. Он был разработан для хорошей интеграции с различными другими плагинами , в том числе с популярной jQuery Validation. Вы можете просматривать демонстрации различных примеров, клонируя репозиторий и просматривая examples/index.html в своем браузере.
бонус
Мир программного обеспечения с открытым исходным кодом велик, и часто вы избалованы выбором при выборе виджета для использования в вашем следующем проекте. Тем не менее, это не означает, что мы должны избегать платить за вещи, которые действительно дают нам ценность. Таким образом, вот два плагина мастера форм, которые являются платными решениями. Я призываю вас проверить их и приобрести, если они вам подходят:
- Мастер форм — многоэтапная проверка форм
- Тимон — Мастер пошаговых форм + Построитель пошаговых форм jQuery
И, наконец, если вы тот человек, который предпочитает понимать, что происходит под капотом, а не захватывать плагин, то, возможно, вы захотите проверить эти учебники, которые покажут вам, как создать мастер форм из царапина.
- Превратите любую веб-форму в мощного мастера с помощью jQuery
- Многошаговая форма с индикатором выполнения с использованием jQuery и CSS
Наслаждайтесь!
Вывод
Итак, у вас есть это — общий обзор шести плагинов мастера форм jQuery, каждый из которых имеет свои особенности и сильные стороны. Что бы вы ни выбрали, будет зависеть от требований вашего проекта. Надеюсь, вы нашли в этом посте что-то полезное для вас. Дайте нам знать, если мы что-то упустили, или какой плагин ваш любимый, оставив комментарий ниже.