CSS ile HTML Durum Değişikliklerini Gerçek Zamanlı Sayın
Sayma her yerde bir görevdir web uygulamalarında. Kaç tane okunmamış e-postanız var? Yapılacaklar listenizde kaç görev kontrol edilmiyor? Alışveriş sepetine kaç tane donut çeşidi konulur? Hepsi, kullanıcıların cevapları hakettiği önemli sorulardır..
Yani, bu yazı size nasıl yapılacağını gösterecek iki belirtilen öğeleri say, Bu, onay kutuları ve metin girişleri gibi kullanıcı kontrollerinin çoğunluğunu oluşturur., CSS sayaçlarını kullanma.
Gerek önce CSS’e sahip bu ülkeleri hedefleyin, vasıtasıyla mümkün olan sözde sınıflar ve HTML özellikleri Bu sadece bunu yapmamıza izin veriyor. Devam edin ve fikri deneyimleyin ve bir elementin durumundaki değişimi dinamik olarak gösteren farklı sözde sınıfları keşfedin..
En basit onay kutularıyla başlayacağız.
1. Onay kutuları
Onay kutuları “kontrol” işaretlendiklerinde durumu belirtiniz. :kontrol Sözde sınıf işaretli durumu gösterir.
onay kutusu # 1
onay kutusu # 2
onay kutusu # 3
Kontrol:
İşaretli:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] sayaç artışı: unTickedBoxCount; input [type = 'checkbox']: kontrol edilmiş counter-artım: tickedBoxCount; #tickedBoxCount :: before content: counter (tickedBoxCount); #unTickedBoxCount :: before content: counter (unTickedBoxCount);
Daha önce de söylediğim gibi, bu dava çok basit. Biz kök öğeye iki sayaç yerleştir ve sırasıyla her iki durumu için her onay kutusu için artırma. Sayaç değerleri o zaman kullanarak belirlenmiş bir yerde görüntülenir. içerik özellik.
Daha iyi anlamak istersen CSS sayaçları nasıl çalışır?, önceki yayınımıza bir göz atın.
Aşağıda, nihai sonucu görebilirsiniz. Onay kutularını işaretleyip işaretini kaldırdığınızda, “Kontrol” ve “kontrolsüz” sayaçlar değiştirilmiş gerçek zamanlı.
2. Metin girişleri
Ayrıca kaç tane metin girişi olduğunu sayabiliriz. dolduruldu Ve kaç tane boş bırakıldı kullanıcı tarafından Bu çözüm öncekine göre kolay olmayacak çünkü onay kutularının aksine, metin girişlerinde sözde sınıf yok doldurulduklarında işaretlemek.
Bu yüzden alternatif bir yol bulmamız gerekiyor. Bir sözde sınıf var bir öğenin yer tutucu metnine sahip olduğunu gösterir.; denir : Tutucu gösterilmeyen.
Metin girişimizde yer tutucuları kullanırsak, giriş alanının ne zaman boş olduğunu bilebiliriz. Bu kullanıcı ne zaman olur henüz bir şey yazmadı çünkü bu olduğunda yer tutucu kaybolacak.
Dolgulu:
Boş:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] sayaç artışı: filledInputCount; input [type = 'text']: yer tutucuya gösterilen counter-increment: emptyInputCount; #filledInputCount :: before content: counter (filledInputCount); #emptyInputCount :: before content: counter (emptyInputCount);
Sonuç öncekine benzer - iki sayaç otomatik olarak artırıldı ve azaltıldı giriş alanlarına metin girerken veya eklerken.
3. Ayrıntılar
Bir elemanın alternatif durumları her zaman sadece sözde sınıflar tarafından gösterilmek zorunda değildir. Olabilir Bu işi yapan HTML özellikleri, durumunda olduğu gibi
Yani, açık Öğedeki HTML özelliği. Bu özellik CSS’de hedeflenebilirözellik seçicisini söyleyin.
S1: soru # 1
cevap 1
S2: soru # 2
cevap # 2
S3: soru # 3
cevap # 3
Açık:
Kapalı:
:: root counter-reset: openDetailCount, closedDetailCount; details counter-artım: closedDetailCount; detaylar [open] counter-artım: openDetailCount; #closedDetailCount :: before content: counter (closedDetailCount); #openDetailCount :: before content: counter (openDetailCount);
Sonuç iki gerçek zamanlı CSS sayacı tekrar: Açık ve Kapalı.
4. Radyo düğmeleri
Radyo düğmelerinin sayılması farklı bir teknik gerektirir. Kesinlikle kullanabiliriz :kontrol Onay kutuları için kullandığımız sözde sınıf. Ancak, radyo düğmeleri onay kutularından farklı olarak kullanılır.
Radyo düğmeleri gruplar halinde olması gerektiği. Kullanıcı bir grup içindeki sadece birini seçebilir. Her grup tek bir birim olarak hareket eder. İki durum bir radyo düğmesi grubunun sahip olabileceği ya düğmelerden biri seçildi veya hiçbiri seçilmedi.
Dolayısıyla, radyo düğmelerini tek tek düğmelerle saymamalıyız. Düğme gruplarına göre. Bunu başarmak için, biz faydalanmak : N-inci-tipi selektör. Daha sonra açıklayacağım; ilk önce kodu görelim.
Radyo-1.1 Radyo-1.2 Radyo-1.3
Radyo-2.1 Radyo-2.2 Radyo-2.3
Radyo-2.1 Radyo-2.2 Radyo-2.3
Seçilen:
Seçilmemiş:
Bizim ihtiyacımız aynı ismi ver Aynı gruptaki radyo düğmelerine Yukarıdaki koddaki her grubun içinde üç radyo düğmesi bulunur..
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) sayaç artışı: unSelectedRadioCount; input [type = 'radio']: nt-tipi (3n): checked sayaç artışı: selectedRadioCount; input [type = 'radio']: değil (: nth-of-type (3n)): kontrol sayaç artışı: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: before content: counter (selectedRadioCount); #unSelectedRadioCount :: before content: counter (unSelectedRadioCount);
Yukarıdaki snippet'teki ilk üç stil kuralı, hedefleme dışında onay kutularına uyguladığımız kurallarla aynıdır her Radyo düğmesi, her gruptaki son radyo düğmesini hedefliyoruz, bizim durumumuzda üçüncü olan hangisi (: N-inci-of-tipi (3n)). Yani tüm radyo düğmelerini saymıyoruz ama grup başına sadece bir tane.
Ancak, bize doğru bir gerçek zamanlı sonuç vermeyecektir. gruptaki diğer iki radyo düğmesini saymak için henüz herhangi bir kural belirtmediniz. Bunlardan biri kontrol edilirse sayılmalı ve kontrol edilmeyen sonuç aynı anda düşmelidir.
Bu yüzden biz ekle -1 değer sonra unSelectedRadioCount Bir gruptaki diğer iki radyo düğmesini hedefleyen son stil kuralında. Bunlardan biri kontrol edildiğinde, -1 irade denetlenmeyen sonucu azaltmak.
Sayıların Yerleştirilmesi
Sadece doğru sonucu görebilirsiniz sayım bittikten sonra, yani, sayılacak olan bütün elementlerin işlenmesinden sonra. Bu nedenle sayaçları göstereceğimiz öğeyi yerleştirmemiz gerekiyor sadece sayılacak öğelerden sonra HTML kaynak kodunda.
Elemanların altındaki sayaçları, sayfada başka bir yerde göstermek istemeyebilirsiniz. Bu durumda sen sayaçları yeniden konumlandırmanız gerekir gibi CSS özelliklerini kullanma Çevirmek, kenar, veya pozisyon.
Ancak benim önerim, CSS Izgarasını kullan böylece sayfanızın düzenini oluşturabilirsiniz HTML kaynak kodundaki öğelerinin sırasından bağımsız. Örneğin, sayaçları giriş alanlarının üstüne veya yanına yerleştiren bir ızgara kolayca oluşturabilirsiniz..
