כיצד לעצב סרגלי התקדמות רספונסיביים באמצעות HTML, CSS ו-JavaScript

בקטע הקוד שלמעלה, יישם את המתודולוגיות המפורטות להלן:

• צור כותרת וכלול שתי '
  ' אלמנטים לצבירת סרגל ההתקדמות.
• כמו כן, כלול את '
  ' רכיב הכולל את האפשרויות לעבור בסרגל ההתקדמות כשהראשון פעיל.
  • לבסוף, צור שני לחצנים כדי לעבור אחורה או לנווט לשלב הבא, בהתאמה.

  קוד CSS

  
  
  

  כעת, סקירה כללית של בלוק קוד ה-CSS הבא:

  < סִגְנוֹן סוּג = 'טקסט/css' >
  #התקדמות {
  עמדה: קרוב משפחה;
  margin-bottom: 30px;
  }
  #progress1 {
  מיקום: מוחלט;
  רקע: ירוק;
  גובה: 5 פיקסלים;
  רוֹחַב: 0 % ;
  חלק עליון: חמישים % ;
  שמאלה: 0 ;
  }
  #progress2 {
  שולים: 0 ;
  ריפוד: 0 ;
  סגנון רשימה: אין;
  לְהַצִיג: לְהַגמִישׁ ;
  להצדיק-תוכן: רווח-בין;
  }
  #progress2::before {
  תוֹכֶן: '' ;
  צבע רקע: אפור בהיר;
  מיקום: מוחלט;
  חלק עליון: חמישים % ;
  שמאלה: 0 ;
  גובה: 5 פיקסלים;
  רוֹחַב: 100 % ;
  z-index: -1 ;
  }
  #progress2 .step {
  גבול: 3 פיקסלים אפור בהיר מלא;
  רדיוס הגבול: 100 % ;
  רוחב: 25px;
  גובה: 25 פיקסלים;
  גובה קו: 25px;
  יישור טקסט: מרכז;
  צבע רקע: #fff;
  font-family: sans-serif;
  גודל גופן: 14px;
  עמדה: קרוב משפחה;
  z-index: 1 ;
  }
  #progress2 .step.active {
  צבע גבול: ירוק;
  צבע רקע: ירוק;
  צֶבַע: #fff;
  }
  סִגְנוֹן >

  בקוד הזה:

  • התאם את המיקום היחסי של סרגל ההתקדמות ואת המיקום המוחלט של רכיבי הילדים הבסיסיים.
  • כמו כן, סגננו את סרגל ההתקדמות כך שלפני המעבר לשלב הבא, הוא יכלול צבע ברירת מחדל ועובר לצבע אחר כשתמשיך לשלב הבא.
  • זה מושג באמצעות סטיילינג, כלומר, ' צבע רקע ” וכו' כל אחד מהצעדים הלא פעילים והפעילים בתוך המעגל.

  קוד JavaScript

  לבסוף, שימו לב לגוש הקוד המצוין להלן:

  < תַסרִיט סוּג = 'טקסט/Javascript' >
  לתת xBar = document.getElementById ( 'התקדמות1' ) ;
  לתת xNext = document.getElementById ( 'התקדמות הבאה' ) ;
  לתת xPrev = document.getElementById ( 'התקדמות חזרה' ) ;
  לתת steps = document.querySelectorAll ( '.שלב' ) ;
  לתת פעיל = 1 ;
  xNext.addEventListener ( 'נְקִישָׁה' , ( ) = < {
  פעיל++;
  אם ( פָּעִיל < צעדים.אורך ) {
  active = steps.length;
  }
  מגיב התקדמות ( ) ;
  } ) ;
  xPrev.addEventListener ( 'נְקִישָׁה' , ( ) = < {
  פָּעִיל--;
  אם ( פָּעִיל > 1 ) {
  פעיל = 1 ;
  }
  מגיב התקדמות ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  צעדים.לכל אחד ( ( צעד, אני ) = < {
  אם ( אני > פָּעִיל ) {
  step.classList.add ( 'פָּעִיל' ) ;
  } אַחֵר {
  step.classList.remove ( 'פָּעִיל' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( פעיל - 1 ) / ( steps.length - 1 ) ) * 100 + '%' ;
  אם ( פעיל === 1 ) {
  xPrev.disabled = נָכוֹן ;
  } אַחֵר אם ( פעיל === steps.length ) {
  xNext.disabled = נָכוֹן ;
  } אַחֵר {
  xPrev.disabled = שֶׁקֶר ;
  xNext.disabled = שֶׁקֶר ;
  }
  } ;
  תַסרִיט >

  בשורות קוד אלה:

  • קודם כל, הפעל את סרגל ההתקדמות, ואת הכפתורים הקודמים והבאים באמצעות ' id ' משתמש ב ' getElementById() ' שיטה.
  • לאחר מכן, החל את ' addEventListener() ' שיטה כזו שבזמן המופעל ' נְקִישָׁה אירוע ', הצעדים הפעילים עוברים עד לסיום השלבים באמצעות ' אורך ' תכונה.
  • כמו כן, חצו חזרה דרך המדרגות.
  • כמו כן, הפעל את ' responsiveProgress() פונקציה שעוברת דרך כל אחד מהשלבים ומחליפה את המחלקה הפעילה באמצעות המשפט 'if/else'.
  • כעת, הקצה את רוחב סרגל ההתקדמות כאחוז ביחס לשלבים הפעילים והסך הכל/כל השלבים.
  • לבסוף, השבת את הכפתור המתאים אם השלב הפעיל הוא הראשון או האחרון.

  הערה: במקרה זה, הקוד כולו כלול באותו קובץ HTML עם התגים הייעודיים עבור ' CSS ' ו' JavaScript 'קודים. עם זאת, ניתן לקשר גם קבצים נפרדים.

  תְפוּקָה

  

  סיכום

  סרגל התקדמות שלבים מגיב נכנס לתוקף כאשר טופס גדול מפוצל למספר שלבים וניתן לעצב אותו באמצעות HTML, CSS ו-JavaScript. ניתן גם להתאים את סרגל ההתקדמות הזה בהתאם לדרישות, כלומר, הוספה או הסרה של השלבים וכו'. בכתבה זו, הרחבנו על עיצוב הפסים הרספונסיביים באמצעות HTML, CSS ו-JavaScript.