Πώς να σχεδιάσετε αποκριτικές γραμμές προόδου χρησιμοποιώντας HTML, CSS και JavaScript

Στο παραπάνω απόσπασμα κώδικα, εφαρμόστε τις παρακάτω μεθοδολογίες:

• Δημιουργήστε μια επικεφαλίδα και συμπεριλάβετε δύο '
  ” στοιχεία για τη συγκέντρωση της γραμμής προόδου.
• Επίσης, συμπεριλάβετε το «
  ' στοιχείο που περιλαμβάνει τις επιλογές για να περάσεις μέσα από τη γραμμή προόδου με την πρώτη να είναι ενεργή.
  • Τέλος, δημιουργήστε δύο κουμπιά για να μετακινηθείτε προς τα πίσω ή να πλοηγηθείτε στο επόμενο βήμα, αντίστοιχα.

  Κωδικός CSS

  
  
  

  Τώρα, μια επισκόπηση του ακόλουθου μπλοκ κώδικα CSS:

  < στυλ τύπος = 'κείμενο/css' >
  #πρόοδος {
  θέση: σχετική;
  margin-bottom: 30px;
  }
  #πρόοδος1 {
  θέση: απόλυτη;
  φόντο: πράσινο;
  ύψος: 5px;
  πλάτος: 0 % ;
  μπλουζα: πενήντα % ;
  αριστερά: 0 ;
  }
  #πρόοδος2 {
  περιθώριο: 0 ;
  υλικό παραγεμίσματος: 0 ;
  στιλ λίστας: κανένας;
  απεικόνιση: καλώδιο ;
  justify-content: space-mes?
  }
  #πρόοδος2::πριν από {
  περιεχόμενο: '' ;
  Χρώμα φόντου: ανοιχτό γκρι;
  θέση: απόλυτη;
  μπλουζα: πενήντα % ;
  αριστερά: 0 ;
  ύψος: 5px;
  πλάτος: 100 % ;
  z-index: -1 ;
  }
  #πρόοδος2 .βήμα {
  περίγραμμα: 3 εικονοστοιχεία συμπαγές ανοιχτό γκρι.
  ακτίνα συνόρων: 100 % ;
  πλάτος: 25 px;
  ύψος: 25 px;
  Ύψος γραμμής: 25 px;
  text-align: κέντρο;
  χρώμα του φόντου: #fff;
  γραμματοσειρά-οικογένεια: sans-serif;
  μέγεθος γραμματοσειράς: 14 px;
  θέση: σχετική;
  z-index: 1 ;
  }
  #progress2 .step.active {
  χρώμα περιγράμματος: πράσινο;
  Χρώμα φόντου: πράσινο;
  χρώμα: #fff;
  }
  στυλ >

  Σε αυτόν τον κώδικα:

  • Προσαρμόστε τη σχετική θέση της γραμμής προόδου και την απόλυτη θέση των υποκείμενων θυγατρικών στοιχείων.
  • Επίσης, διαμορφώστε τη γραμμή προόδου έτσι ώστε πριν από τη μετάβαση στο επόμενο βήμα, να περιλαμβάνει ένα προεπιλεγμένο χρώμα και να μεταβαίνει σε διαφορετικό χρώμα όταν προχωρήσετε στο επόμενο βήμα.
  • Αυτό επιτυγχάνεται μέσω του styling, δηλ. χρώμα του φόντου ” κλπ. καθένα από τα ανενεργά και ενεργά βήματα μέσα στον κύκλο.

  Κώδικας 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 = ( ) = < {
  βήματα.για Κάθε ( ( βήμα, θ ) = < {
  αν ( Εγώ > ενεργός ) {
  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.