Meter Etiketi
meter etiketi, bir değeri güzel bir şekilde
göstermek için kullanılır.
Etiketin görünümü, kısmen veya tamamen dolu bir çubuktur. Çubuk yeşil, sarı veya kırmızı olabilir (çubuğun rengi öznitelik değerlerine bağlıdır, aşağıda açıklanacaktır):
meter etiketi, örneğin şu durumda
kullanılmalıdır: ekrana mevcut sıcaklık değerini
yazdırmak istiyorsunuz ve sıcaklık 0
ila 100 arasında değişebiliyor. Şu
öznitelikleri belirtmelisiniz: value
özniteliği mevcut sıcaklık değerini, min
özniteliği mümkün olan minimum değeri (bizim
durumumuzda 0), max özniteliği ise
mümkün olan maksimum değeri (bizim durumumuzda
100) göstermelidir.
value özniteliğinin değerine bağlı
olarak çubuk küçük veya büyük olacaktır.
value değeri olarak 10 belirtilirse,
çubuk küçük olacaktır (çünkü 10 minimuma
- sıfıra - çok yakındır), ancak 90
değeri belirtilirse, çubuk büyük olacaktır
(çünkü 90 maksimuma - 100'e - yakındır).
Değer 100 olarak belirtilirse - çubuk tüm
öğeyi kaplayacaktır (çünkü değer maksimuma
ulaşmıştır).
100'den büyük bir değer belirtilirse,
çubuk yine de tüm öğeyi kaplayacaktır.
0 ve daha azı belirtilirse - çubuk
hiç görünmeyecektir.
Örnek
Value özniteliğinin değeri küçük:
<meter value="10" min="0" max="100"></meter>
:
Örnek
Value özniteliğinin değeri büyük:
<meter value="90" min="0" max="100"></meter>
:
Örnek
Value özniteliğinin değeri orta:
<meter value="50" min="0" max="100"></meter>
:
Örnek
Value özniteliğinin değeri maksimuma eşit:
<meter value="100" min="0" max="100"></meter>
:
Örnek
Value özniteliğinin değeri minimuma eşit:
<meter value="0" min="0" max="100"></meter>
:
Örnek
Value özniteliğinin değeri maksimumdan büyük:
<meter value="110" min="0" max="100"></meter>
:
Örnek
Value özniteliğinin değeri minimumdan küçük:
<meter value="-10" min="0" max="100"></meter>
:
Low ve High Özniteliklerini Ekliyoruz
meter etiketinde 2 öznitelik daha
vardır: low ve high.
Çalışmalarını sıcaklık örneği üzerinden inceleyelim.
Hatırlatma: minimum sıcaklığımız 0,
maksimum sıcaklığımız ise 100.
Şimdi şu aralıkları yapmak istediğimizi varsayalım
- "soğuk sıcaklık" 0 ile 20 arası,
"normal" 20 ile 80 arası ve
"sıcak" 80 ile 100 arası.
Soğuk sıcaklığı belirlemek için, low
özniteliğinin değeri olarak 20 sayısını
belirtiriz. Böylece, sıfırdan (min
özniteliğinin değeri) 20'ye (low
özniteliğinin değeri) kadar olan kısım düşük
değerler bölgesi olur.
Sıcak sıcaklığı belirlemek için, high
özniteliğinin değeri olarak 80 sayısını
belirtiriz. Böylece, 80'den (high
özniteliğinin değeri) 100'ye (max
özniteliğinin değeri) kadar olan kısım yüksek
değerler bölgesi olur.
Normal sıcaklık, 20 (low
özniteliğinin değeri) ile 80 (high
özniteliğinin değeri) arasında olacaktır. Bu
bölgeye normal değerler bölgesi diyelim.
Şimdi, value özniteliğinin değerinin
hangi bölgeye düştüğüne bağlı olarak, çubuk
yeşil veya sarı renkte olacaktır. Normal
değerler bölgesine düşersek yeşil, yüksek
veya düşük değerler bölgesine düşersek
sarı olacaktır.
Örnek
value özniteliğinin değeri düşük
değerler bölgesine düşer:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Örnek
value özniteliğinin değeri normal
değerler bölgesine düşer:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Örnek
value özniteliğinin değeri yüksek
değerler bölgesine düşer:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Optimum Özniteliğini Ekliyoruz
optimum özniteliği, optimal değeri
belirler. Örneğimiz için optimal soğuk sıcaklık,
normal sıcaklık veya sıcak sıcaklık olabilir
- sizin seçiminize bağlı. Optimal sıcaklığın
soğuk olduğunu belirttiğinizi varsayalım.
Şimdi, value özniteliğinin değerine
(yani mevcut sıcaklığa) bağlı olarak çubuğun
rengi yeşil, sarı veya kırmızı olacaktır.
Mevcut sıcaklık optimal sıcaklık bölgesine (biz soğuk olarak belirttik) düşerse, çubuğun rengi yeşil olacaktır. Mevcut sıcaklık optimal olanın komşu aralığına (bizim durumumuzda bu normal sıcaklıktır) düşerse, çubuk sarıya dönecektir. Mevcut sıcaklık optimal olanın komşu olmayan aralığına (bizim durumumuzda bu sıcak sıcaklıktır) düşerse, çubuk kırmızı olacaktır.
Optimal sıcaklık olarak sıcak sıcaklık belirtilirse de benzer şekilde gerçekleşecektir. Bu durumda, mevcut sıcaklık sıcak sıcaklık bölgesine düşerse - çubuk yeşil olacak, normal bölgeye düşerse - sarı, soğuk bölgeye düşerse - kırmızı olacaktır.
Optimal olarak normal sıcaklık belirtilirse, çubuk sadece yeşil (mevcut sıcaklık normale düşerse) veya sarı (mevcut sıcaklık normalin komşusuna, yani sıcağa veya soğuğa düşerse) olabilir.
Hangi aralığın optimal olduğunu belirtmek
için, optimum özniteliğinin değeri
olarak o aralıktan herhangi bir sayı belirtilmelidir.
Aşağıdaki örneklerde optimum özniteliğinin
değeri düşük değerler bölgesine (yani
soğuk sıcaklıklara) düşmektedir.
Örnek
value özniteliğinin değeri düşük
değerler bölgesine düşer:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Örnek
value özniteliğinin değeri normal
değerler bölgesine düşer:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Örnek
value özniteliğinin değeri yüksek
değerler bölgesine düşer:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Aşağıdaki örneklerde optimum özniteliğinin
değeri yüksek değerler bölgesine (yani
sıcak sıcaklıklara) düşmektedir.
Örnek
value özniteliğinin değeri düşük
değerler bölgesine düşer:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Örnek
value özniteliğinin değeri normal
değerler bölgesine düşer:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Örnek
value özniteliğinin değeri yüksek
değerler bölgesine düşer:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Aşağıdaki örneklerde optimum özniteliğinin
değeri normal değerler bölgesine (yani
normal sıcaklıklara) düşmektedir.
Örnek
value özniteliğinin değeri düşük
değerler bölgesine düşer:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Örnek
value özniteliğinin değeri normal
değerler bölgesine düşer:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Örnek
value özniteliğinin değeri yüksek
değerler bölgesine düşer:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Eski Tarayıcılar
Eski tarayıcılar meter etiketini güzel
bir şekilde gösteremez ve bunun yerine etiketin
kendi içeriğini gösterecektir:
<meter value="10" min="0" max="100">Bu metin eski tarayıcılarda görünecek.</meter>
:
Öznitelikler
Özniteliklerin değeri ondalıklı ve negatif bir sayı olabilir.
| Öznitelik | Açıklama |
|---|---|
value |
Mevcut değeri ayarlar. Zorunlu öznitelik. |
min |
Mümkün olan minimum değeri belirler. Varsayılan değer: 0. |
max |
Mümkün olan maksimum değeri belirler. Varsayılan değer: 1. |
low |
Düşük değerler bölgesinin sınırını belirler. Düşük değerler, min
özniteliğindeki sayıdan low özniteliğindeki sayıya kadar olacaktır.
|
high |
Yüksek değerler bölgesinin sınırını belirler. Yüksek değerler, high
özniteliğindeki sayıdan max özniteliğindeki sayıya kadar olacaktır.
|
optimum |
Optimal değerler bölgesini tanımlar. |
Ayrıca Bakınız
-
progressetiketi,
bir yükleme çubuğu oluşturur.