Докато създават интерактивни и удобни за потребителя формуляри или портални страници на сайта, разработчиците обикновено включват адаптивни ленти за напредък, които са привлекателни и уведомяват потребителя за завършеното състояние на формуляра или създават профил. Тези видове функционалности са от голяма помощ за подобряване на потребителското изживяване на конкретен сайт.
Този блог обсъжда следните аспекти:
- Какво представлява адаптивната лента за напредък?
- Как да проектираме адаптивна лента за напредъка, използвайки HTML, CSS и JavaScript?
Какво представлява адаптивната лента за напредък?
В тази конкретна лента за напредък голям формуляр е разделен на множество стъпки. Тази лента уведомява посетителите за състоянието на попълнените и оставащите формуляри.
Как да проектираме адаптивна лента за напредъка, използвайки HTML, CSS и JavaScript?
Отзивчива лента за напредъка може да бъде проектирана с помощта на HTML, CSS и JavaScript. За да направите това, вижте следния код. Първо се задълбочете в HTML частта на кода, както следва:
< h2 стил = 'подравняване на текст: център;' > Отзивчива лента за напредък h2 >
< див документ за самоличност = 'напредък' >
< див документ за самоличност = 'напредък1' > див >
< ул документ за самоличност = 'напредък2' >
< че клас = 'стъпка активна' > 1 че >
< че клас = 'стъпка' > 2 че >
< че клас = 'стъпка' > 3 че >
< че клас = 'стъпка' > Край че >
ул >
див >
< бутон документ за самоличност = 'прогрес назад' клас = 'btn' хора с увреждания > обратно бутон >
< бутон документ за самоличност = 'напредък следващ' клас = 'btn' > Следващия бутон >
В горния кодов фрагмент приложете дадените по-долу методологии:
- Създайте заглавие и включете две „ ” елементи за натрупване на лентата за напредък.
- Също така включете „
- И накрая, създайте два бутона, за да се върнете назад или съответно да преминете към следващата стъпка.
CSS код
Сега преглед на следния CSS кодов блок:
< стил Тип = 'текст/css' >
#прогрес {
позиция: роднина;
margin-bottom: 30px;
}
#напредък1 {
позиция: абсолютна;
фон: зелен;
височина: 5px;
ширина: 0 % ;
Горна част: петдесет % ;
наляво: 0 ;
}
#напредък2 {
марж: 0 ;
подплата: 0 ;
стил на списък: няма;
дисплей: flex ;
justify-content: интервал между;
}
#progress2::before {
съдържание: '' ;
цвят на фона: светлосив;
позиция: абсолютна;
Горна част: петдесет % ;
наляво: 0 ;
височина: 5px;
ширина: 100 % ;
z-индекс: -1 ;
}
#progress2 .step {
рамка: 3px плътно светло сиво;
радиус на границата: 100 % ;
ширина: 25px;
височина: 25px;
височина на реда: 25px;
подравняване на текст: център;
Цвят на фона: #Ф ф ф;
семейство шрифтове: sans-serif;
размер на шрифта: 14px;
позиция: роднина;
z-индекс: 1 ;
}
#progress2 .step.active {
цвят на границата: зелен;
цвят на фона: зелен;
цвят: #Ф ф ф;
}
стил >В този код:
- Коригирайте относителната позиция на лентата за напредък и абсолютната позиция на подлежащите дъщерни елементи.
- Освен това оформете лентата за напредъка така, че преди да преминете към следващата стъпка, тя да включва цвят по подразбиране и да преминава към различен цвят при преминаване към следващата стъпка.
- Това се постига чрез стилизиране, т.е. Цвят на фона ” и т.н. всяка от неактивните и активните стъпки в кръга.
JavaScript код
И накрая, обърнете внимание на предоставения по-долу кодов блок:
< сценарий Тип = 'текст/javascript' >
позволявам xBar = document.getElementById ( 'напредък1' ) ;
позволявам xNext = document.getElementById ( 'напредък следващ' ) ;
позволявам xPrev = document.getElementById ( 'прогрес назад' ) ;
позволявам стъпки = document.querySelectorAll ( '.стъпка' ) ;
позволявам активен = 1 ;
xNext.addEventListener ( 'клик' , ( ) = < {
активен++;
ако ( активен < стъпки.дължина ) {
активен = стъпки.дължина;
}
responsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'клик' , ( ) = < {
активен--;
ако ( активен > 1 ) {
активен = 1 ;
}
responsiveProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
steps.forEach ( ( стъпка, i ) = < {
ако ( i > активен ) {
step.classList.add ( 'активен' ) ;
} друго {
step.classList.remove ( 'активен' ) ;
}
} ) ;
xBar.style.width =
( ( активен - 1 ) / ( стъпки.дължина - 1 ) ) * 100 + '%' ;
ако ( активен === 1 ) {
xPrev.disabled = вярно ;
} друго ако ( активно === стъпки.дължина ) {
xNext.disabled = вярно ;
} друго {
xPrev.disabled = невярно ;
xNext.disabled = невярно ;
}
} ;
сценарий >В тези кодови редове:
- Първо, извикайте лентата за напредъка и бутоните предишен и следващ чрез техните „ идентификатори ' използвайки ' getElementById() ” метод.
- След това приложете „ addEventListener() ' метод, така че при задействания ' щракнете ', активните стъпки се преминават, докато стъпките бъдат завършени чрез ' дължина ' Имот.
- По същия начин преминете обратно през стъпалата.
- Също така извикайте „ responsiveProgress() ” функция, която преминава през всяка от стъпките и превключва активния клас чрез израза „if/else”.
- Сега задайте ширината на лентата за напредъка като процент по отношение на активните и общите/всички стъпки.
- И накрая, деактивирайте съответния бутон, ако активната стъпка е първата или последната.
Забележка: В този случай целият код се съдържа в същия HTML файл със специалните тагове за „ CSS ' и ' JavaScript ” кодове. Отделни файлове обаче също могат да бъдат свързани.
Изход
Заключение
Лента за напредък на реагиращата стъпка влиза в сила, когато голям формуляр е разделен на няколко стъпки и може да бъде проектиран с помощта на HTML, CSS и JavaScript. Тази лента за напредъка може също да бъде допълнително персонализирана според изискванията, т.е. добавяне или премахване на стъпките и т.н. В тази статия разработихме подробно проектирането на адаптивните ленти с помощта на HTML, CSS и JavaScript.
- Също така включете „