Teg meter
Teg meter ma'lum bir qiymatni
chiroyli shaklda chiqarish uchun ishlatiladi.
Tegning tashqi ko'rinishi qisman yoki butunlay bo'yalgan chiziqni ifodalaydi. Chiziq yashil, sariq yoki qizil rangda bo'lishi mumkin (chiziqning rangi atributlarning qiymatlariga bog'liq, bu haqida keyinroq):
Teg meter dan, masalan, quyidagi holatlarda
foydalanish kerak: siz hozirgi harorat qiymatini
ekranda chiqarmoqchisiz,
bunda harorat 0 dan 100 gacha o'zgarishi mumkin. Siz quyidagi
atributlarni ko'rsatishingiz kerak: value atributi
hozirgi harorat qiymatini ko'rsatishi kerak, min atributi
- minimal mumkin bo'lgan qiymat (bizning holatimizda 0), max atributi - maksimal mumkin bo'lgan (bizning holatimizda 100).
value atributining qiymatiga qarab
chiziq kichik yoki katta bo'ladi. Agar
value ni 10 qiymatida ko'rsatilsa,
chiziq kichik bo'ladi (chunki 10
minimumga - nolga juda yaqin), agar
90 qiymati ko'rsatilsa, chiziq
katta bo'ladi (chunki 90 maksimumga
- 100 ga yaqin). Agar qiymat 100 ko'rsatilsa -
chiziq butun elementni egallaydi (chunki qiymat
maksimumga yetdi).
Agar 100 dan katta qiymat ko'rsatilsa,
chiziq baribir butun elementni egallaydi.
Agar 0 va undan kam ko'rsatilsa - chiziq
umuman bo'lmaydi.
Misol
Value atributining qiymati kichik:
<meter value="10" min="0" max="100"></meter>
:
Misol
Value atributining qiymati katta:
<meter value="90" min="0" max="100"></meter>
:
Misol
Value atributining qiymati o'rta:
<meter value="50" min="0" max="100"></meter>
:
Misol
Value atributining qiymati maksimalga teng:
<meter value="100" min="0" max="100"></meter>
:
Misol
Value atributining qiymati minimalga teng:
<meter value="0" min="0" max="100"></meter>
:
Misol
Value atributining qiymati maksimaldan katta:
<meter value="110" min="0" max="100"></meter>
:
Misol
Value atributining qiymati minimaldan kichik:
<meter value="-10" min="0" max="100"></meter>
:
Low va high atributlarini qo'shamiz
meter tegida yana 2 atribut mavjud:
low va high.
Ularning ishlashini harorat misolida ko'rib chiqamiz.
Eslatib o'tamiz, bizning minimal harorat
0 ga, maksimal harorat esa 100 ga teng.
Endi esa quyidagi diapazonlarni belgilaymiz
- "sovuq harorat" 0 dan 20 gacha,
"normal" 20 dan 80 gacha va
"issiq" 80 dan 100 gacha.
Sovuq haroratni belgilash uchun,
low atributining qiymatiga 20 sonini ko'rsatamiz.
Shunday qilib, noldan (bu min atributining qiymati)
20 gacha (low atributining qiymati)
bizda past qiymatlar sohasi bo'ladi.
Issiq haroratni belgilash uchun,
high atributining qiymatiga 80 sonini ko'rsatamiz.
Shunday qilib, 80 dan (bu
high atributining qiymati)
100 gacha (max atributining qiymati)
bizda yuqori qiymatlar sohasi bo'ladi.
Normal harorat 20 dan
(bu low atributining qiymati) 80 gacha
(high atributining qiymati) bo'ladi. Bu sohani
normal qiymatlar sohasi deb ataymiz.
Endi, value atributining qiymati qaysi sohaga
tushishiga qarab,
chiziq yashil yoki
sariq rangga bo'yaladi. Yashil rang, agar biz
normal qiymatlar sohasiga tushsak bo'ladi, sariq rang
- agar yuqori yoki past qiymatlar sohasiga tushsak.
Misol
value atributining qiymati
past qiymatlar sohasiga tushadi:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Misol
value atributining qiymati
normal qiymatlar sohasiga tushadi:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Misol
value atributining qiymati
yuqori qiymatlar sohasiga tushadi:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Optimum atributini qo'shamiz
optimum atributi optimal
qiymatni belgilaydi. Bizning misolimiz uchun optimal
sovuq harorat, normal
yoki issiq harorat bo'lishi mumkin - sizning tanlovingiz. Faraz qilaylik,
siz optimal harorat sovuq ekanligini ko'rsatdingiz.
Endi, value atributining qiymatiga qarab
(ya'ni hozirgi haroratga qarab) chiziqning rangi yashil,
sariq yoki qizil bo'ladi.
Agar hozirgi harorat optimal haroratlar sohasiga tushsa (biz optimal sovuq ekanligini ko'rsatdik), chiziqning rangi yashil bo'ladi. Agar hozirgi harorat optimalga qo'shni bo'lgan diapazonga tushsa (bizning holatimizda bu normal harorat), chiziq sariq rangga aylanadi. Agar hozirgi harorat optimalga qo'shni bo'lmagan diapazonga tushsa (bizning holatimizda bu issiq harorat), chiziq qizil rangga aylanadi.
Xuddi shunday jarayon yuz beradi, agar optimal harorat sifatida issiq harorat ko'rsatilsa. Bunda, agar hozirgi harorat issiq haroratlar sohasiga tushsa - chiziq yashil bo'ladi, agar normal harorat sohasiga tushsa - sariq, agar sovuq harorat sohasiga tushsa - qizil.
Agar optimal sifatida normal harorat ko'rsatilsa, chiziq faqat yashil rangda (agar hozirgi harorat normalga tushsa) yoki sariq rangda (agar hozirgi harorat normal haroratga qo'shni sohaga tushsa, ya'ni issiq yoki sovuq harorat sohasiga) bo'lishi mumkin.
Qaysi diapzon optimal ekanligini ko'rsatish uchun,
optimum atributining qiymatiga shu diapzondan istalgan sonni ko'rsatish kerak.
Quyidagi misollarda optimum atributining qiymati
past qiymatlar sohasiga tushadi
(ya'ni sovuq haroratlar sohasiga).
Misol
value atributining qiymati
past qiymatlar sohasiga tushadi:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Misol
value atributining qiymati
normal qiymatlar sohasiga tushadi:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Misol
value atributining qiymati
yuqori qiymatlar sohasiga tushadi:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Quyidagi misollarda optimum atributining qiymati
yuqori qiymatlar sohasiga tushadi
(ya'ni issiq haroratlar sohasiga).
Misol
value atributining qiymati
past qiymatlar sohasiga tushadi:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Misol
value atributining qiymati
normal qiymatlar sohasiga tushadi:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Misol
value atributining qiymati
yuqori qiymatlar sohasiga tushadi:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Quyidagi misollarda optimum atributining qiymati
normal qiymatlar sohasiga tushadi
(ya'ni normal haroratlar sohasiga).
Misol
value atributining qiymati
past qiymatlar sohasiga tushadi:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Misol
value atributining qiymati
normal qiymatlar sohasiga tushadi:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Misol
value atributining qiymati
yuqori qiymatlar sohasiga tushadi:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Eski brauzerlar
Eski brauzerlar meter tegini
chiroyli shaklda ko'rsata olmaydi va uning o'rniga
teging o'zining tarkibini chiqaradi:
<meter value="10" min="0" max="100">Bu matn eski brauzerlarda ko'rinadi.</meter>
:
Atributlar
Atributlarning qiymati kasr yoki manfiy son bo'lishi mumkin.
| Atribut | Tavsif |
|---|---|
value |
Hozirgi qiymatni o'rnatadi. Majburiy atribut. |
min |
Minimal mumkin bo'lgan qiymatni belgilayadi. Standart qiymat: 0. |
max |
Maksimal mumkin bo'lgan qiymatni belgilayadi. Standart qiymat: 1. |
low |
Past qiymatlar sohasining chegarasini belgilayadi. Past qiymatlar min atributidagi sondan
low atributidagi songacha bo'ladi.
|
high |
Past qiymatlar sohasining chegarasini belgilayadi. Past qiymatlar high atributidagi sondan
max atributidagi songacha bo'ladi.
|
optimum |
Optimal qiymatlar sohasini belgilayadi. |
Shuningdek qarang
-
teg
progress,
yuklash chizig'ini yaratadi.