Geliştiriciler, sitede etkileşimli ve kullanıcı dostu formlar veya portal sayfaları oluştururken genellikle ilgi çekici ve kullanıcıya formun tamamlanmış durumu hakkında bilgi veren veya bir profil oluşturan duyarlı ilerleme çubukları içerir. Bu tür işlevler, belirli bir sitenin kullanıcı deneyiminin geliştirilmesinde büyük fayda sağlar.
Bu blog aşağıdaki hususları tartışmaktadır:
- Duyarlı İlerleme Çubuğu nedir?
- HTML, CSS ve JavaScript Kullanarak Duyarlı Bir İlerleme Çubuğu Nasıl Tasarlanır?
Duyarlı İlerleme Çubuğu nedir?
Bu özel ilerleme çubuğunda büyük bir form birden çok adıma bölünmüştür. Bu çubuk, ziyaretçilere doldurulan ve kalan formların durumu hakkında bilgi verir.
HTML, CSS ve JavaScript Kullanarak Duyarlı Bir İlerleme Çubuğu Nasıl Tasarlanır?
HTML, CSS ve JavaScript yardımıyla duyarlı bir ilerleme çubuğu tasarlanabilir. Bunu yapmak için aşağıdaki kodu inceleyin. İlk olarak kodun HTML kısmını aşağıdaki şekilde inceleyin:
< h2 stil = 'metin hizalama: ortala;' > Duyarlı İlerleme Çubuğu h2 >
< div İD = 'ilerlemek' >
< div İD = 'ilerleme1' > div >
< ul İD = 'ilerleme2' >
< O sınıf = 'adım aktif' > 1 O >
< O sınıf = 'adım' > 2 O >
< O sınıf = 'adım' > 3 O >
< O sınıf = 'adım' > Son O >
ul >
div >
< düğme İD = 'geri ilerleme' sınıf = 'btn' engelli > Geri düğme >
< düğme İD = 'sonraki ilerleme' sınıf = 'btn' > Sonraki düğme >
Yukarıdaki kod parçacığında aşağıda verilen metodolojileri uygulayın:
- Bir başlık oluşturun ve iki “ İlerleme çubuğunu biriktirmek için ” öğeleri.
- Ayrıca şunu da ekleyin: “
- Son olarak, sırasıyla geri dönmek veya bir sonraki adıma geçmek için iki düğme oluşturun.
CSS Kodu
Şimdi aşağıdaki CSS kod bloğuna genel bir bakış:
< stil tip = 'metin/css' >
#ilerlemek {
konum: göreceli;
kenar boşluğu alt: 30 piksel;
}
#ilerleme1 {
konum: mutlak;
arka plan: yeşil;
yükseklik: 5 piksel;
Genişlik: 0 % ;
tepe: elli % ;
sol: 0 ;
}
#ilerleme2 {
marj: 0 ;
dolgu malzemesi: 0 ;
liste stili: yok;
görüntülemek: esnek ;
içeriği haklı göster: aradaki boşluk;
}
#ilerleme2::önce {
içerik: '' ;
arka plan rengi: açık gri;
konum: mutlak;
tepe: elli % ;
sol: 0 ;
yükseklik: 5 piksel;
Genişlik: 100 % ;
z-endeksi: -1 ;
}
#ilerleme2 .adım {
kenarlık: 3 piksel düz açık gri;
sınır yarıçapı: 100 % ;
genişlik: 25 piksel;
yükseklik: 25 piksel;
satır yüksekliği: 25 piksel;
metin hizalama: ortala;
arka plan rengi: #fff;
yazı tipi ailesi: sans-serif;
yazı tipi boyutu: 14 piksel;
konum: göreceli;
z-endeksi: 1 ;
}
#ilerleme2 .step.active {
kenar rengi: yeşil;
arka plan rengi: yeşil;
renk: #fff;
}
stil >Bu kodda:
- İlerleme çubuğunun göreceli konumunu ve temeldeki alt öğelerin mutlak konumunu ayarlayın.
- Ayrıca ilerleme çubuğunu, bir sonraki adıma geçmeden önce varsayılan bir renk içerecek ve bir sonraki adıma geçildiğinde farklı bir renge geçiş yapacak şekilde biçimlendirin.
- Bu, stillendirme yoluyla elde edilir; örneğin, ' arka plan rengi ” vb. daire içindeki etkin olmayan ve etkin adımların her biri.
JavaScript Kodu
Son olarak aşağıda verilen kod bloğuna dikkat edin:
< senaryo tip = 'metin/javascript' >
izin vermek xBar = document.getElementById ( 'ilerleme1' ) ;
izin vermek xNext = document.getElementById ( 'sonraki ilerleme' ) ;
izin vermek xPrev = document.getElementById ( 'geri ilerleme' ) ;
izin vermek adımlar = document.querySelectorAll ( '.adım' ) ;
izin vermek aktif = 1 ;
xNext.addEventListener ( 'tıklamak' , ( ) = < {
aktif++;
eğer ( aktif < adım uzunluğu ) {
aktif = adımlar.uzunluk;
}
duyarlıİlerleme ( ) ;
} ) ;
xPrev.addEventListener ( 'tıklamak' , ( ) = < {
aktif--;
eğer ( aktif > 1 ) {
aktif = 1 ;
}
duyarlıİlerleme ( ) ;
} ) ;
const duyarlı İlerleme = ( ) = < {
adımlar.forEach ( ( adım, ben ) = < {
eğer ( Ben > aktif ) {
step.classList.add ( 'aktif' ) ;
} başka {
step.classList.remove ( 'aktif' ) ;
}
} ) ;
xBar.style.width =
( ( aktif - 1 ) / ( adımlar.uzunluk - 1 ) ) * 100 + '%' ;
eğer ( aktif === 1 ) {
xPrev.disabled = doğru ;
} başka eğer ( aktif === adım.uzunluk ) {
xSonraki.disabled = doğru ;
} başka {
xPrev.disabled = YANLIŞ ;
xSonraki.disabled = YANLIŞ ;
}
} ;
senaryo >Bu kod satırlarında:
- Her şeyden önce, ilerleme çubuğunu ve önceki ve sonraki düğmelerini “ kimlikler ' kullanmak ' getElementById() ' yöntem.
- Bundan sonra “ addEventListener() ” yöntemi öyle ki tetiklendiğinde “ tıklamak ' olayında, aktif adımlar ' aracılığıyla adımlar bitene kadar geçilir. uzunluk ' mülk.
- Aynı şekilde adımlardan geriye doğru ilerleyin.
- Ayrıca şunu çağırın: duyarlıProgress() Adımların her birinde döngü yapan ve 'if/else' ifadesi aracılığıyla aktif sınıf arasında geçiş yapan 'işlevi.
- Şimdi ilerleme çubuğunun genişliğini etkin adımlara ve toplam/tüm adımlara göre yüzde olarak atayın.
- Son olarak, etkin adım ilk veya son adımsa ilgili düğmeyi devre dışı bırakın.
Not: Bu durumda, kodun tamamı, “ için özel etiketlerle birlikte aynı HTML dosyasında bulunur. CSS ' Ve ' JavaScript ” kodları. Ancak ayrı dosyalar da bağlanabilir.
Çıktı
Çözüm
Büyük bir form birden fazla adıma bölündüğünde ve HTML, CSS ve JavaScript kullanılarak tasarlanabildiğinde duyarlı adım ilerleme çubuğu devreye girer. Bu ilerleme çubuğu ayrıca gereksinimlere göre, yani adımların eklenmesi veya kaldırılması vb. gibi daha da özelleştirilebilir. Bu yazıda, duyarlı çubukların HTML, CSS ve JavaScript kullanılarak tasarlanması üzerinde ayrıntılı olarak durduk.
- Ayrıca şunu da ekleyin: “