HTML5 Metreyi Kullanma ve Şekillendirme [Kılavuz]

Bir etkinliğin ne kadarının gerçekleştirildiğini gösteren HTML ilerleme çubuğuna aşina iseniz, metre öğesinin buna benzer olduğunu göreceksiniz - her ikisi de geçerli bir değeri maksimum değerden göster. Ancak ilerleme çubuğunun aksine, sayaç çubuğu ilerleme göstermek için kullanılmamalıdır..

Göstermek için kullanılır belirli bir aralıktaki statik değer, örneğin, bir disk depolama alanında kullanılan depolama alanını, depolama alanının ne kadarını doldurup doldurmadığını göstererek belirleyebilirsiniz..

Bunun üzerine, sayaç elemanı ayrıca menzili içinde üç bölgeye kadar görselleştirmek için de kullanılabilir. Depolama alanı örneğinin tekrar kullanılması, yalnızca ne kadar alanın doldurulduğunu göstermek yerine, işgal edilen alanın yalnızca seyrek olarak doldurulduğunu (% 30 altında diyelim) veya yarıya yakın (% 30 ila% 60 arasında) veya daha fazla olduğunu görsel olarak da belirtebilirsiniz. farklı renkler kullanarak yarı dolu (% 60'ın üzerinde). Bu, kullanıcıların depolama sınırına ne zaman ulaştıklarını bilmelerine yardımcı olur.

Bu yayında size göstereceğiz metre çubuğunu nasıl stillendireceğinizi belirtilen her iki amaç için basit gösterge (belirtilen bölge olmadan) ve 3 renk belirtilmiş bölgeli iki gösterge örneği. İkincisi için üzerinde çalışacağız "işaret" göstergesi oluşturma fakir, ortalama ve iyi işaretleri göstermek için ve bir "pH" göstergesi Asidik, nöral ve alkali pH değerlerini göstermek için.

Öznitellikler

Örneklerle başlamadan ve derinlemesine gitmeden önce, aşağıdaki öznitelikler listesine hızlıca bir göz atalım, varsayılanları gibi bu öznitelikler hakkında daha fazlası vb..

• değer - Değeri metre eleman
• min - Metre aralığının minimum değeri
• maksimum - Sayaç aralığının maksimum değeri
• düşük - Düşük sınır değerini belirtir
• yüksek - Yüksek sınır değerini gösterir
• Optimum - Menzildeki optimum nokta

1. Basit Bir Ölçer Şekillendirme

İşte sadece bir öznitelik kullanarak çok basit bir örnek değer. Devam etmeden önce, ilk üç şeyi bilmemiz gerekir:

(1) Bir varsayılan var min ve maksimum aralığını tanımlayan değer metre, sırasıyla 0 ve 1 olan. (2) Kullanıcı tarafından belirtilen değer içine düşmüyor metre aralığı, ya da değerini alacak min veya maksimum, hangisine en yakınsa. (3) Bitiş etiketi zorunludur.

İşte sözdizimi:

 0.5 

Alternatif olarak, biz de ekleyebiliriz min ve maksimum Böylece şöyle bir kullanıcı tanımlı bir aralık sağlayan özellikleri:

2. "Marks" Ölçer Şekillendirme

Öncelikle, aralığı üç bölgeye ayırmamız gerekiyor (sol / düşük, orta, sağ / yüksek). Bu vardı düşük ve yüksek öznitelikler devreye giriyor. Bu, üç bölgenin nasıl bölündüğüdür..

Üç bölge arasında oluşur min & düşük , düşük & yüksek ve yüksek & maksimum.

Şimdi belli şartların olduğu açık düşük ve yüksek oluşacak üç bölge için değerler izlenmelidir:

• düşük den az olamaz min ve daha büyük yüksek & maksimum
• yüksek daha büyük olamaz maksimum ve daha az düşük & min.
• Ve bir kriter her ikisi de kırıldığında düşük ve yüksek diğer değişkenin değerini karşılamayan kriterlerde, yani düşük değerin altında min hangi olmamalı, düşük alacak min değer.

Bu örnekte, üç bölgemizi soldan sağa doğru ele alacağız:

• fakir: (0-33)
• Ortalama: (34-60)
• İyi: (61-100)

Bu nedenle, aşağıdaki öznitelikler için değerlerdir; min = "0" düşük = "34" yüksek = "60" maksimum = "100".

İşte bölgeleri görselleştiren bir resim.

Sayaçta şu anda oluşturduğumuz üç bölge olmasına rağmen, şu anda yalnızca iki renkteki yalnızca iki "bölge" türünü gösterecektir. Niye ya? Çünkü Optimum orta bölgede.

Optimum Nokta

Hangi bölgede (üçünden) Optimum nokta düşer, varsayılan olarak yeşil renkli "optimal bölge" olarak kabul edilir. Hemen yanındaki bölgelere "en uygun alt bölge" denir ve turuncu renktedir. En uzak olanı kırmızı renkli "optimal olmayan bir bölge" dir..

Şimdiye kadar bizim örneğimizde biz bir değer atamadık Optimum. Bu nedenle, varsayılan değer 50 olur ve orta bölgeyi "en uygun bölge" yapar ve hemen yanında bulunanlar (hem solda hem de sağda) "alt-optimal bölgeler" olarak.

Kısacası yukarıdaki durumda, metre Orta bölgeye düşen element yeşil ile gösterilir; geri kalan turuncu.

İstediğimiz bu değil. Bu şekilde renkli olmasını istiyoruz: fakir (kırmızı), Ortalama (Portakal), İyi (yeşil)

Doğru bölge en uygun bölgemiz olarak kabul edildiğinden, Optimum doğru bölgeye düşecek bir değer (61 ve 100 de dahil olmak üzere 61-100 arasında herhangi bir değer).

Bu örnek için 90 alıyoruz. Bu, sağ bölgeyi "optimal", orta (hemen sonraki bölgesini) "alt optimal" ve en solunda "en uygun olmayan" bölgeyi bırakacaktır..

Bu bizim ölçümüze geçecek olan şey..

2. "pH" Ölçer Şekillendirme

İlk olarak, pH değerlerinde bir solukluk. Asidik bir çözeltinin pH değeri 7'den düşüktür, alkalin bir çözeltinin pH değeri 7'den büyüktür ve eğer 7'ye inerseniz, bu nötr bir çözeltidir.

Böylece, aşağıdaki değerleri ve özellikleri kullanacağız:

Düşük = "7" , Yüksek = "7", max = "14", ve min sıfırın varsayılan değerini alacaktır.

Kodu tamamlamak için kalan tüm özellikleri eklemeden önce, renklere karar verelim: asidik (kırmızı), nötr (beyaz) ve alkalik (mavi). Ayrıca asidik bölgeyi (7'nin altındaki sol bölge) "optimal" olarak kabul edelim

İstediğiniz görüntüyü elde etmek için hedefleyeceğimiz CSS sözde unsurları: firefox. (Webkit metre sözde elemanları ve daha fazlası için "referans" altında listelenen bağlantılara bakın.)

 .ph_meter background: lightgrey; genişlik: 300px;  .ph_meter: -moz-metre-optimum :: - moz-meter-bar background: indianred;  .ph_meter: -moz-metre-alt-optimum :: - moz-metre-bar background: antiquewhite;  .ph_meter: -moz-metre-alt-alt-optimum :: - moz-metre-çubuğu background: steelblue;  

İşte tam html kodu ve pH ölçerin son sonucu.

Referanslar

• HTML5 Metre W3C spec
• Webkit sözde elemanlarının ve sınıflarının listesi
• Satıcıya özel sahte unsurların listesi

Hongkiat hakkında daha fazlası: HTML5 ile İlerleme Çubuğu Oluşturma ve Şekillendirme