தளத்தில் ஊடாடும் மற்றும் பயனர் நட்பு படிவங்கள் அல்லது போர்ட்டல் பக்கங்களை உருவாக்கும் போது, டெவலப்பர்கள் வழக்கமாக பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டைகளை இணைத்து, படிவத்தின் முழுமையான நிலையைப் பயனருக்குத் தெரியப்படுத்துவார்கள் அல்லது சுயவிவரத்தை உருவாக்குவார்கள். ஒரு குறிப்பிட்ட தளத்தின் பயனர் அனுபவத்தை மேம்படுத்த இந்த வகையான செயல்பாடுகள் பெரிதும் உதவுகின்றன.
இந்த வலைப்பதிவு பின்வரும் அம்சங்களைப் பற்றி விவாதிக்கிறது:
- பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டி என்றால் என்ன?
- HTML, CSS மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டியை எவ்வாறு வடிவமைப்பது?
பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டி என்றால் என்ன?
இந்த குறிப்பிட்ட முன்னேற்றப் பட்டியில், ஒரு பெரிய வடிவம் பல படிகளாகப் பிரிக்கப்பட்டுள்ளது. இந்தப் பட்டி, பூர்த்தி செய்யப்பட்ட மற்றும் மீதமுள்ள படிவங்களின் நிலையைப் பார்வையாளர்களுக்குத் தெரிவிக்கிறது.
HTML, CSS மற்றும் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டியை எவ்வாறு வடிவமைப்பது?
HTML, CSS மற்றும் JavaScript ஆகியவற்றின் உதவியுடன் பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டியை வடிவமைக்க முடியும். இதைச் செய்ய, பின்வரும் குறியீட்டைப் பார்க்கவும். முதலில், குறியீட்டின் HTML பகுதியை பின்வருமாறு ஆராயவும்:
< h2 பாணி = 'உரை-சீரமைப்பு: மையம்;' > பதிலளிக்கக்கூடிய முன்னேற்றப் பட்டி h2 >
< div ஐடி = 'முன்னேற்றம்' >
< div ஐடி = 'முன்னேற்றம்1' > div >
< உல் ஐடி = 'முன்னேற்றம்2' >
< அந்த வர்க்கம் = 'செயலில் படி' > 1 அந்த >
< அந்த வர்க்கம் = 'படி' > 2 அந்த >
< அந்த வர்க்கம் = 'படி' > 3 அந்த >
< அந்த வர்க்கம் = 'படி' > முடிவு அந்த >
உல் >
div >
< பொத்தானை ஐடி = 'முன்னேற்றம்' வர்க்கம் = 'btn' ஊனமுற்றவர் > மீண்டும் பொத்தானை >
< பொத்தானை ஐடி = 'அடுத்த முன்னேற்றம்' வர்க்கம் = 'btn' > அடுத்தது பொத்தானை >
மேலே உள்ள குறியீடு துணுக்கில், கீழே கொடுக்கப்பட்டுள்ள வழிமுறைகளைப் பயன்படுத்தவும்:
- ஒரு தலைப்பை உருவாக்கி, இரண்டைச் சேர்க்கவும் ' முன்னேற்றப் பட்டியைக் குவிப்பதற்கான கூறுகள்.
- மேலும், '
- கடைசியாக, முறையே பின்வாங்க அல்லது அடுத்த படிக்கு செல்ல இரண்டு பொத்தான்களை உருவாக்கவும்.
CSS குறியீடு
இப்போது, பின்வரும் CSS குறியீடு தொகுதியின் கண்ணோட்டம்:
< பாணி வகை = 'உரை/சிஎஸ்எஸ்' >
# முன்னேற்றம் {
நிலை: உறவினர்;
விளிம்பு-கீழ்: 30px;
}
# முன்னேற்றம்1 {
நிலை: முழுமையான;
பின்னணி: பச்சை;
உயரம்: 5px;
அகலம்: 0 % ;
மேல்: ஐம்பது % ;
விட்டு: 0 ;
}
# முன்னேற்றம் 2 {
விளிம்பு: 0 ;
திணிப்பு: 0 ;
பட்டியல் பாணி: எதுவுமில்லை;
காட்சி: நெகிழ்வு ;
நியாயப்படுத்து-உள்ளடக்கம்: இடைவெளி-இடையில்;
}
#முன்னேற்றம்2::முன் {
உள்ளடக்கம்: '' ;
பின்னணி நிறம்: வெளிர் சாம்பல்;
நிலை: முழுமையான;
மேல்: ஐம்பது % ;
விட்டு: 0 ;
உயரம்: 5px;
அகலம்: 100 % ;
z-குறியீடு: -1 ;
}
# முன்னேற்றம் 2 .படி {
எல்லை: 3px திட லைட்கிரே;
எல்லை-ஆரம்: 100 % ;
அகலம்: 25px;
உயரம்: 25px;
வரி உயரம்: 25px;
text-align: மையம்;
பின்னணி நிறம்: #fff;
எழுத்துரு குடும்பம்: sans-serif;
எழுத்துரு அளவு: 14px;
நிலை: உறவினர்;
z-குறியீடு: 1 ;
}
#progress2 .step.active {
எல்லை-நிறம்: பச்சை;
பின்னணி நிறம்: பச்சை;
நிறம்: #fff;
}
பாணி >இந்த குறியீட்டில்:
- முன்னேற்றப் பட்டியின் ஒப்பீட்டு நிலை மற்றும் அடிப்படை குழந்தைகள் கூறுகளின் முழுமையான நிலையை சரிசெய்யவும்.
- மேலும், முன்னேற்றப் பட்டியை வடிவமைக்கவும், அதாவது அடுத்த படிக்கு மாறுவதற்கு முன், அது இயல்புநிலை நிறத்தை உள்ளடக்கியது மற்றும் அடுத்த படிக்குச் செல்லும்போது வேறு நிறத்திற்கு மாறுகிறது.
- இது ஸ்டைலிங் மூலம் அடையப்படுகிறது, அதாவது, ' பின்னணி நிறம் ” போன்றவை. வட்டத்திற்குள் செயல்படாத மற்றும் செயலில் உள்ள ஒவ்வொரு படிகளும்.
ஜாவாஸ்கிரிப்ட் குறியீடு
கடைசியாக, கீழே கொடுக்கப்பட்டுள்ள குறியீடு தொகுதிக்கு கவனம் செலுத்துங்கள்:
< கையால் எழுதப்பட்ட தாள் வகை = 'உரை/ஜாவாஸ்கிரிப்ட்' >
விடு xBar = document.getElementById ( 'முன்னேற்றம்1' ) ;
விடு xNext = document.getElementById ( 'அடுத்த முன்னேற்றம்' ) ;
விடு xPrev = document.getElementById ( 'முன்னேற்றம்' ) ;
விடு படிகள் = document.querySelectorAll ( '.படி' ) ;
விடு செயலில் = 1 ;
xNext.addEventListener ( 'கிளிக்' , ( ) = < {
செயலில்++;
என்றால் ( செயலில் < படிகள்.நீளம் ) {
செயலில் = படிகள்.நீளம்;
}
பதிலளிக்கக்கூடிய முன்னேற்றம் ( ) ;
} ) ;
xPrev.addEventListener ( 'கிளிக்' , ( ) = < {
செயலில்--;
என்றால் ( செயலில் > 1 ) {
செயலில் = 1 ;
}
பதிலளிக்கக்கூடிய முன்னேற்றம் ( ) ;
} ) ;
தொடர்ந்து பதிலளிக்கக்கூடிய முன்னேற்றம் = ( ) = < {
படிகள்.ஒவ்வொருவருக்கும் ( ( படி, i ) = < {
என்றால் ( நான் > செயலில் ) {
step.classList.add ( 'செயலில்' ) ;
} வேறு {
step.classList.remove ( 'செயலில்' ) ;
}
} ) ;
xBar.style.width =
( ( செயலில் - 1 ) / ( படிகள் நீளம் - 1 ) ) * 100 + '%' ;
என்றால் ( செயலில் === 1 ) {
xPrev.disabled = உண்மை ;
} வேறு என்றால் ( செயலில் === படிகள்.நீளம் ) {
xNext.disabled = உண்மை ;
} வேறு {
xPrev.disabled = பொய் ;
xNext.disabled = பொய் ;
}
} ;
கையால் எழுதப்பட்ட தாள் >இந்த குறியீடு வரிகளில்:
- முதலில், முன்னேற்றப் பட்டி மற்றும் முந்தைய மற்றும் அடுத்த பொத்தான்களை அவற்றின் ' ஐடிகள் ' பயன்படுத்தி ' getElementById() ”முறை.
- அதன் பிறகு, விண்ணப்பிக்கவும் ' addEventListener() 'தூண்டப்பட்ட முறை' கிளிக் செய்யவும் 'நிகழ்வு, படிகள் முடியும் வரை செயலில் உள்ள படிகள் கடந்து செல்கின்றன' நீளம் ”சொத்து.
- அதேபோல், படிகள் வழியாக மீண்டும் பயணிக்கவும்.
- மேலும், ' பதிலளிக்கக்கூடிய முன்னேற்றம்() ” செயல்பாடு, ஒவ்வொரு படிநிலையிலும் சுழன்று, செயலில் உள்ள வகுப்பை “if/else” அறிக்கை வழியாக மாற்றுகிறது.
- இப்போது, செயலில் உள்ள மற்றும் மொத்த/அனைத்து படிகளைப் பொறுத்து, முன்னேற்றப் பட்டியின் அகலத்தை சதவீதமாக ஒதுக்கவும்.
- கடைசியாக, செயலில் உள்ள படி முதல் அல்லது கடைசியாக இருந்தால் தொடர்புடைய பொத்தானை முடக்கவும்.
குறிப்பு: இந்த வழக்கில், முழு குறியீடும் ஒரே HTML கோப்பில் '' க்கான பிரத்யேக குறிச்சொற்களுடன் உள்ளது CSS 'மற்றும்' ஜாவாஸ்கிரிப்ட் ” குறியீடுகள். இருப்பினும், தனி கோப்புகளை இணைக்க முடியும்.
வெளியீடு
முடிவுரை
ஒரு பெரிய படிவத்தை பல படிகளாகப் பிரித்து, HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி வடிவமைக்கப்படும்போது, பதிலளிக்கக்கூடிய படி முன்னேற்றப் பட்டி நடைமுறைக்கு வரும். இந்த முன்னேற்றப் பட்டியை தேவைகளின்படி மேலும் தனிப்பயனாக்கலாம், அதாவது, படிகளைச் சேர்ப்பது அல்லது நீக்குவது போன்றவை. இந்த பதிவில், HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி பதிலளிக்கக்கூடிய பார்களை வடிவமைப்பது பற்றி விரிவாகக் கூறியுள்ளோம்.
- மேலும், '