При создании интерактивных и удобных для пользователя форм или страниц портала на сайте разработчики обычно включают адаптивные индикаторы выполнения, которые привлекательны и сообщают пользователю о статусе завершения формы или создания профиля. Эти типы функций очень помогают улучшить взаимодействие с пользователем конкретного сайта.
В этом блоге обсуждаются следующие аспекты:
- Что такое адаптивный индикатор выполнения?
- Как создать адаптивный индикатор выполнения с использованием HTML, CSS и JavaScript?
Что такое адаптивный индикатор выполнения?
В этом конкретном индикаторе выполнения большая форма разделена на несколько шагов. Эта панель уведомляет посетителей о статусе заполненных и оставшихся форм.
Как создать адаптивный индикатор выполнения с использованием HTML, CSS и JavaScript?
Адаптивный индикатор выполнения можно создать с помощью HTML, CSS и JavaScript. Для этого проверьте следующий код. Сначала углубимся в HTML-часть кода, а именно:
< ч2 стиль '=' 'выравнивание текста: по центру'; > Адаптивный индикатор выполнения ч2 >
< div идентификатор '=' 'прогресс' >
< div идентификатор '=' 'прогресс1' >/ div >
< ул идентификатор '=' 'прогресс2' >
< что сорт '=' 'шаг активен' > 1 что >
< что сорт '=' 'шаг' > 2 что >
< что сорт '=' 'шаг' > 3 что >
< что сорт '=' 'шаг' > Конец что >
ул >
div >
< кнопка идентификатор '=' 'прогресс назад' сорт '=' 'кстати' неполноценный > Назад кнопка >
< кнопка идентификатор '=' 'прогрессследующий' сорт '=' 'кстати' > Следующий кнопка >
В приведенном выше фрагменте кода примените приведенные ниже методологии:
- Создайте заголовок и добавьте два « <дел> ” элементы для накопления индикатора выполнения.
- Также включите « <ул> ” элемент, который включает в себя варианты перехода по индикатору выполнения, при этом первый из них активен.
- Наконец, создайте две кнопки для возврата или перехода к следующему шагу соответственно.
CSS-код
Теперь обзор следующего блока кода CSS:
< стиль тип '=' 'текст/css' >#прогресс {
положение: относительное;
поле внизу: 30 пикселей;
}
#прогресс1 {
позиция: абсолютная;
фон: зеленый;
высота: 5 пикселей;
ширина: 0 % ;
вершина: пятьдесят % ;
левый: 0 ;
}
#прогресс2 {
допуск: 0 ;
дополнение: 0 ;
стиль списка: нет;
отображать: гибкий ;
оправдание-содержание: пространство между;
}
#progress2::before {
содержание: '' ;
цвет фона: светло-серый;
позиция: абсолютная;
вершина: пятьдесят % ;
левый: 0 ;
высота: 5 пикселей;
ширина: 100 % ;
z-индекс: -1 ;
}
#progress2 .step {
граница: 3 пикселя, сплошная светло-серая;
граница-радиус: 100 % ;
ширина: 25 пикселей;
высота: 25 пикселей;
высота строки: 25 пикселей;
выравнивание текста: по центру;
фоновый цвет: #ффф;
семейство шрифтов: без засечек;
размер шрифта: 14 пикселей;
положение: относительное;
z-индекс: 1 ;
}
#progress2 .step.active {
цвет границы: зеленый;
цвет фона: зеленый;
цвет: #ффф;
}
стиль >
В этом коде:
- Отрегулируйте относительное положение индикатора выполнения и абсолютное положение нижележащих дочерних элементов.
- Кроме того, создайте стиль индикатора выполнения таким образом, чтобы перед переходом к следующему шагу он имел цвет по умолчанию и переходил к другому цвету при переходе к следующему шагу.
- Это достигается за счет стилизации, т. е.: « фоновый цвет и т. д. каждого из неактивных и активных шагов внутри круга.
JavaScript-код
Наконец, обратите внимание на приведенный ниже блок кода:
< сценарий тип '=' 'текст/Javascript' >позволять xBar = document.getElementById ( 'прогресс1' ) ;
позволять xNext = document.getElementById ( 'прогрессследующий' ) ;
позволять xPrev = document.getElementById ( 'прогресс назад' ) ;
позволять шаги = document.querySelectorAll ( '.шаг' ) ;
позволять активный = 1 ;
xNext.addEventListener ( 'щелкнуть' , ( ) '=' < {
активный++;
если ( активный < шаги.длина ) {
активный = шаги.длина;
}
отзывчивыйПрогресс ( ) ;
} ) ;
xPrev.addEventListener ( 'щелкнуть' , ( ) '=' < {
активный--;
если ( активный > 1 ) {
активный = 1 ;
}
отзывчивыйПрогресс ( ) ;
} ) ;
константный отзывчивыйПрогресс = ( ) '=' < {
шаги.forEach ( ( шаг, я ) '=' < {
если ( я > активный ) {
шаг.classList.add ( 'активный' ) ;
} еще {
шаг.classList.remove ( 'активный' ) ;
}
} ) ;
xBar.style.width =
( ( активный - 1 ) / ( шаги.длина - 1 ) ) * 100 + '%' ;
если ( активный === 1 ) {
xPrev.disabled = истинный ;
} еще если ( активный === шаги.длина ) {
xNext.disabled = истинный ;
} еще {
xPrev.disabled = ЛОЖЬ ;
xNext.disabled = ЛОЖЬ ;
}
} ;
сценарий >
В этих строках кода:
- Прежде всего, вызовите индикатор выполнения, а также кнопки «Предыдущая» и «Далее» через их « идентификаторы ' используя ' getElementById() метод.
- После этого примените « добавитьEventListener() ” метод такой, что при срабатывании “ щелкнуть ”, активные шаги пройдут до тех пор, пока шаги не будут завершены через событие “ длина ' свойство.
- Аналогичным образом пройдите обратно по ступенькам.
- Также вызовите команду « отзывчивыйПрогресс() », которая проходит через каждый из шагов и переключает активный класс с помощью оператора «if/else».
- Теперь назначьте ширину индикатора выполнения в процентах по отношению к активным и общим/всем шагам.
- Наконец, отключите соответствующую кнопку, если активный шаг является первым или последним.
Примечание: В этом случае весь код содержится в одном HTML-файле со специальными тегами для « CSS ' и ' JavaScript » коды. Однако отдельные файлы также могут быть связаны.
Выход
Заключение
Адаптивный индикатор выполнения шагов вступает в силу, когда большая форма разделена на несколько шагов и может быть разработана с использованием HTML, CSS и JavaScript. Этот индикатор выполнения также можно дополнительно настроить в соответствии с требованиями, например, добавить или удалить шаги и т. д. В этой статье мы подробно остановились на разработке адаптивных индикаторов с использованием HTML, CSS и JavaScript.