Meter тегі
meter тегі белгілі бір мәнді
әдемі пішімде шығару үшін қолданылады.
Тегің сыртқы түрі ішінара немесе толығымен боялған жолақ болып табылады. Жолақ жасыл, сары немесе қызыл түсте болуы мүмкін (жолақтың түсі сипаттамалардың мәндеріне байланысты, бұл туралы төменде айтылады):
meter тегін, мысалы, келесі
жағдайда қолдану керек: сіз экранда ағымдағы температура мәнін
шығарғыңыз келеді, бұл ретте температура 0-ден
100-ге дейін өзгеруі мүмкін. Сізге келесі
сипаттамаларды көрсету керек: value сипаттамасы
ағымдағы температура мәнін көрсетуі керек, min сипаттамасы
- ең төменгі мүмкін мәнді (біздің жағдайда 0), max сипаттамасы - ең жоғары
мүмкін мәнді (біздің жағдайда 100).
value сипаттамасының мәніне байланысты
жолақ кішкентай немесе үлкен болады. Егер
value мәнін 10 деп көрсетсеңіз,
онда жолақ кішкентай болады (өйткені 10
минимумға - нөлге өте жақын), ал егер
мән 90 деп көрсетілсе, онда жолақ
үлкен болады (өйткені 90 максимумға
- 100-ге жақын). Егер мән 100 деп көрсетілсе -
онда жолақ барлық элементті алады (өйткені мән
максимумға жетті).
Егер мән 100-ден үлкен деп көрсетілсе,
онда жолақ бәрібір барлық элементті алады.
Ал егер 0 және одан төмен деп көрсетілсе - онда жолақ
мүлдем болмайды.
Мысал
value сипаттамасының мәні кішкентай:
<meter value="10" min="0" max="100"></meter>
:
Мысал
value сипаттамасының мәні үлкен:
<meter value="90" min="0" max="100"></meter>
:
Мысал
value сипаттамасының мәні орташа:
<meter value="50" min="0" max="100"></meter>
:
Мысал
value сипаттамасының мәні ең жоғары мәнге тең:
<meter value="100" min="0" max="100"></meter>
:
Мысал
value сипаттамасының мәні ең төменгі мәнге тең:
<meter value="0" min="0" max="100"></meter>
:
Мысал
value сипаттамасының мәні ең жоғары мәннен үлкен:
<meter value="110" min="0" max="100"></meter>
:
Мысал
value сипаттамасының мәні ең төменгі мәннен кіші:
<meter value="-10" min="0" max="100"></meter>
:
low және high сипаттамаларын қосу
meter тегінде тағы 2 сипаттама бар:
low және high.
Олардың жұмысын температура мысалында қарастырайық.
Естеріңізге сала кетейін, біздің ең төменгі температура
0-ге тең, ал ең жоғарысы - 100.
Енді біз келесі диапазондарды жасағымыз келеді делік
- "суық температура" 0-ден 20-ге дейін,
"қалыпты" 20-ден 80-ге дейін және
"ыстық" 80-ден 100-ге дейін.
Суық температураны белгілеу үшін,
low сипаттамасының мәні ретінде 20 санын көрсетейік.
Нәтижеде нөлден (бұл min сипаттамасының мәні)
20-ге дейін (low сипаттамасының мәні)
bizde төмен мәндер облысы болады.
Ыстық температураны белгілеу үшін,
high сипаттамасының мәні ретінде 80 санын көрсетейік.
Нәтижеде 80-ден (бұл high сипаттамасының мәні)
100-ге дейін (max сипаттамасының мәні)
bizde жоғары мәндер облысы болады.
Қалыпты температура 20-ден
(бұл low сипаттамасының мәні) 80-ге дейін
(high сипаттамасының мәні) болады. Бұл облысты
қалыпты мәндер облысы деп атаймыз.
Енді, value сипаттамасының мәні қай облысқа
түсетініне байланысты,
жолақ жасыл немесе
сары түске боялады. Жасыл түс, егер біз
қалыпты мәндер облысына түссек,
ал сары
- егер жоғары немесе төмен мәндер облысына түссек.
Мысал
value сипаттамасының мәні
төмен мәндер облысына түседі:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Мысал
value сипаттамасының мәні
қалыпты мәндер облысына түседі:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Мысал
value сипаттамасының мәні
жоғары мәндер облысына түседі:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
optimum сипаттамасын қосу
optimum сипаттамасы онтайлы
мәнді анықтайды. Біздің мысал үшін онтайлы
суық температура, қалыпты
немесе ыстық температура болуы мүмкін - сіздің таңдауыңызба. Біз делік,
сіз онтайлы температура ретінде суық температураны көрсеттіңіз делік.
Енді, value сипаттамасының мәніне байланысты
(яғни ағымдағы
температураға байланысты) жолақтың түсі жасыл,
сары немесе қызыл болады.
Егер ағымдағы температура онтайлы температуралар облысына түссе (ал біз онтайлы температура суық деп көрсеткенбіз), онда жолақтың түсі жасыл болады. Егер ағымдағы температура онтайлы облысқа іргелес диапазонға түссе (біздің жағдайда бұл қалыпты температура), онда жолақ сары түске енеді. Ал егер ағымдағы температура онтайлы облысқа іргелес емес диапазонға түссе (біздің жағдайда бұл ыстық температура), онда жолақ қызыл түске енеді.
Ондай жағдай орын алады, егер онтайлы температура ретінде ыстық температура көрсетілсе. Бұл жағдайда, егер ағымдағы температура ыстық температуралар облысына түссе - жолақ жасыл болады, егер қалыпты температура облысына түссе - сары, егер суық температура облысына түссе - қызыл.
Егер онтайлы температура ретінде қалыпты температура көрсетілсе, онда жолақ тек жасыл (егер ағымдағы температура қалыпты температура облысына түссе) немесе сары (егер ағымдағы температура қалыпты температураға іргелес облысқа түссе, яғни ыстық немесе суық температура облысына) болуы мүмкін.
Қай диапазон онтайлы екенін көрсету үшін,
optimum сипаттамасының мәні ретінде
сол диапазоннан кез келген санды көрсету керек.
Төмендегі мысалдарда optimum сипаттамасының мәні
төмен мәндер облысына түседі
(яғни суық температуралар облысына).
Мысал
value сипаттамасының мәні
төмен мәндер облысына түседі:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Мысал
value сипаттамасының мәні
қалыпты мәндер облысына түседі:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Мысал
value сипаттамасының мәні
жоғары мәндер облысына түседі:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Төмендегі мысалдарда optimum сипаттамасының мәні
жоғары мәндер облысына түседі
(яғни ыстық температуралар облысына).
Мысал
value сипаттамасының мәні
төмен мәндер облысына түседі:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Мысал
value сипаттамасының мәні
қалыпты мәндер облысына түседі:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Мысал
value сипаттамасының мәні
жоғары мәндер облысына түседі:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Төмендегі мысалдарда optimum сипаттамасының мәні
қалыпты мәндер облысына түседі
(яғни қалыпты температуралар облысына).
Мысал
value сипаттамасының мәні
төмен мәндер облысына түседі:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Мысал
value сипаттамасының мәні
қалыпты мәндер облысына түседі:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Мысал
value сипаттамасының мәні
жоғары мәндер облысына түседі:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Ескі браузерлер
Ескі браузерлер meter тегін
әдемі түрде көрсете алмайды және оның орнына
тегің өз мазмұнын шығарады:
<meter value="10" min="0" max="100">Бұл мәтін ескі браузерлерде көрінеді.</meter>
:
Сипаттамалар
Сипаттамалардың мәні бөлшек және теріс сан болуы мүмкін.
| Сипаттама | th>Сипаттама |
|---|---|
value |
Ағымдағы мәнді орнатады. Міндетті сипаттама. |
min |
Ең төменгі мүмкін мәнді белгілейді. Әдепкі мән: 0. |
max |
Ең жоғары мүмкін мәнді белгілейді. Әдепкі мән: 1. |
low |
Төмен мәндер облысының шекарасын белгілейді. Төмен мәндер min сипаттамасындағы саннан
low сипаттамасындағы санға дейін болады.
|
high |
Төмен мәндер облысының шекарасын белгілейді. Төмен мәндер high сипаттамасындағы саннан
max сипаттамасындағы санға дейін болады.
|
optimum |
Онтайлы мәндер облысын анықтайды. |
Сондай-ақ қараңыз
-
progressтегі,
ол жүктеу жолағын жасайды.