సైట్‌లో ఇంటరాక్టివ్ మరియు వినియోగదారు-స్నేహపూర్వక ఫారమ్‌లు లేదా పోర్టల్ పేజీలను సృష్టిస్తున్నప్పుడు, డెవలపర్‌లు సాధారణంగా ఆకర్షణీయంగా ఉండే ప్రతిస్పందించే ప్రోగ్రెస్ బార్‌లను పొందుపరుస్తారు మరియు ఫారమ్ యొక్క పూర్తి స్థితిని వినియోగదారుకు తెలియజేస్తారు లేదా ప్రొఫైల్‌ను సృష్టిస్తారు. నిర్దిష్ట సైట్ యొక్క వినియోగదారు అనుభవాన్ని మెరుగుపరచడంలో ఈ రకమైన కార్యాచరణలు గొప్ప సహాయాన్ని అందిస్తాయి.
ఈ బ్లాగ్ ఈ క్రింది అంశాలను చర్చిస్తుంది:
- రెస్పాన్సివ్ ప్రోగ్రెస్ బార్ అంటే ఏమిటి?
- HTML, CSS మరియు జావాస్క్రిప్ట్‌ని ఉపయోగించి రెస్పాన్సివ్ ప్రోగ్రెస్ బార్‌ని ఎలా డిజైన్ చేయాలి?
రెస్పాన్సివ్ ప్రోగ్రెస్ బార్ అంటే ఏమిటి?
ఈ ప్రత్యేక ప్రోగ్రెస్ బార్‌లో, పెద్ద ఫారమ్ బహుళ దశలుగా విభజించబడింది. ఈ బార్ పూర్తయిన మరియు మిగిలిన ఫారమ్‌ల స్థితిని సందర్శకులకు తెలియజేస్తుంది.
HTML, CSS మరియు జావాస్క్రిప్ట్‌ని ఉపయోగించి రెస్పాన్సివ్ ప్రోగ్రెస్ బార్‌ని ఎలా డిజైన్ చేయాలి?
HTML, CSS మరియు JavaScript సహాయంతో ప్రతిస్పందించే ప్రోగ్రెస్ బార్‌ని రూపొందించవచ్చు. అలా చేయడానికి, కింది కోడ్‌ని తనిఖీ చేయండి. ముందుగా, కోడ్ యొక్క HTML భాగాన్ని ఈ క్రింది విధంగా పరిశీలించండి:
< h2 శైలి = 'టెక్స్ట్-అలైన్: సెంటర్;' > రెస్పాన్సివ్ ప్రోగ్రెస్ బార్ h2 >
< div id = 'పురోగతి' >
< div id = 'ప్రగతి1' > div >
< ఉల్ id = 'ప్రగతి 2' >
< అని తరగతి = 'స్టెప్ యాక్టివ్' > 1 అని >
< అని తరగతి = 'అడుగు' > 2 అని >
< అని తరగతి = 'అడుగు' > 3 అని >
< అని తరగతి = 'అడుగు' > ముగింపు అని >
ఉల్ >
div >
< బటన్ id = 'పురోగతి' తరగతి = 'btn' వికలాంగుడు > వెనుకకు బటన్ >
< బటన్ id = 'తదుపరి పురోగతి' తరగతి = 'btn' > తరువాత బటన్ >
ఎగువ కోడ్ స్నిప్పెట్‌లో, క్రింద ఇవ్వబడిన పద్ధతులను వర్తింపజేయండి:
- శీర్షికను సృష్టించండి మరియు రెండింటిని చేర్చండి ' ప్రోగ్రెస్ బార్‌ను కూడబెట్టడానికి మూలకాలు.
- అలాగే, '
- చివరగా, వరుసగా వెనుకకు తరలించడానికి లేదా తదుపరి దశకు నావిగేట్ చేయడానికి రెండు బటన్లను సృష్టించండి.
CSS కోడ్
ఇప్పుడు, క్రింది CSS కోడ్ బ్లాక్ యొక్క అవలోకనం:
< శైలి రకం = 'టెక్స్ట్/సిఎస్ఎస్' >
#పురోగతి {
స్థానం: బంధువు;
అంచు-దిగువ: 30px;
}
#ప్రగతి1 {
స్థానం: సంపూర్ణ;
నేపథ్యం: ఆకుపచ్చ;
ఎత్తు: 5px;
వెడల్పు: 0 % ;
టాప్: యాభై % ;
ఎడమ: 0 ;
}
#ప్రగతి2 {
అంచు: 0 ;
పాడింగ్: 0 ;
జాబితా-శైలి: ఏదీ లేదు;
ప్రదర్శన: ఫ్లెక్స్ ;
జస్టిఫై-కంటెంట్: స్పేస్-మధ్య;
}
#ప్రగతి2:: ముందు {
విషయము: '' ;
నేపథ్య రంగు: లేత బూడిద రంగు;
స్థానం: సంపూర్ణ;
టాప్: యాభై % ;
ఎడమ: 0 ;
ఎత్తు: 5px;
వెడల్పు: 100 % ;
z-సూచిక: -1 ;
}
#ప్రగతి2 .స్టెప్ {
అంచు: 3px ఘన లైట్‌గ్రే;
సరిహద్దు వ్యాసార్థం: 100 % ;
వెడల్పు: 25px;
ఎత్తు: 25px;
లైన్-ఎత్తు: 25px;
టెక్స్ట్-అలైన్: సెంటర్;
నేపథ్య రంగు: #fff;
ఫాంట్-కుటుంబం: సాన్స్-సెరిఫ్;
ఫాంట్ పరిమాణం: 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 ;
}
ప్రతిస్పందించే ప్రగతి ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
ఒక్కొక్క అడుగు ( ( అడుగు, i ) = < {
ఉంటే ( i > చురుకుగా ) {
step.classList.add ( 'క్రియాశీల' ) ;
} లేకపోతే {
step.classList.remove ( 'క్రియాశీల' ) ;
}
} ) ;
xBar.style.width =
( ( క్రియాశీల - 1 ) / ( అడుగులు. పొడవు - 1 ) ) * 100 + '%' ;
ఉంటే ( క్రియాశీల === 1 ) {
xPrev.disabled = నిజం ;
} లేకపోతే ఉంటే ( క్రియాశీల === దశలు.పొడవు ) {
xNext.disabled = నిజం ;
} లేకపోతే {
xPrev.disabled = తప్పుడు ;
xNext.disabled = తప్పుడు ;
}
} ;
స్క్రిప్ట్ >ఈ కోడ్ లైన్లలో:
- అన్నింటిలో మొదటిది, ప్రోగ్రెస్ బార్‌ను మరియు మునుపటి మరియు తదుపరి బటన్లను వాటి “” ద్వారా ప్రారంభించండి. idలు 'ఉపయోగించి' getElementById() ” పద్ధతి.
- ఆ తరువాత, వర్తించు ' addEventListener() 'ప్రేరేపిత పద్ధతిలో' క్లిక్ చేయండి 'ఈవెంట్, ' ద్వారా దశలు పూర్తయ్యే వరకు క్రియాశీల దశలు దాటబడతాయి పొడవు ”ఆస్తి.
- అదేవిధంగా, దశల ద్వారా తిరిగి ప్రయాణించండి.
- అలాగే, “ని పిలవండి ప్రతిస్పందించే ప్రగతి() ” ఫంక్షన్ ప్రతి దశల ద్వారా లూప్ చేయబడుతుంది మరియు “if/else” స్టేట్‌మెంట్ ద్వారా సక్రియ తరగతిని టోగుల్ చేస్తుంది.
- ఇప్పుడు, సక్రియ మరియు మొత్తం/అన్ని దశలకు సంబంధించి ప్రోగ్రెస్ బార్ వెడల్పును శాతంగా కేటాయించండి.
- చివరగా, క్రియాశీల దశ మొదటి లేదా చివరిది అయితే సంబంధిత బటన్‌ను నిలిపివేయండి.
గమనిక: ఈ సందర్భంలో, '' కోసం అంకితమైన ట్యాగ్‌లతో మొత్తం కోడ్ అదే HTML ఫైల్‌లో ఉంటుంది. CSS 'మరియు' జావాస్క్రిప్ట్ ”కోడ్‌లు. అయితే, ప్రత్యేక ఫైల్‌లను కూడా లింక్ చేయవచ్చు.
అవుట్‌పుట్
ముగింపు
ఒక పెద్ద ఫారమ్ బహుళ దశలుగా విభజించబడినప్పుడు మరియు HTML, CSS మరియు JavaScriptను ఉపయోగించి రూపొందించబడినప్పుడు ప్రతిస్పందించే దశ పురోగతి బార్ అమలులోకి వస్తుంది. ఈ ప్రోగ్రెస్ బార్ అవసరాలకు అనుగుణంగా మరింత అనుకూలీకరించబడుతుంది అంటే, దశలను జోడించడం లేదా తీసివేయడం మొదలైనవి. ఈ రైట్-అప్‌లో, మేము HTML, CSS మరియు JavaScriptని ఉపయోగించి ప్రతిస్పందించే బార్‌లను రూపొందించడం గురించి వివరించాము.
- అలాగే, '