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 ատրիբուտի արժեքը)
մենք ունենք ցածր արժեքների տիրույթ։
Տաք ջերմաստիճանը նշելու համար մենք կնշենք
high ատրիբուտի արժեքով 80 թիվը։
Ստացվում է, որ 80-ից (սա
high ատրիբուտի արժեքն է) մինչև 100 (max ատրիբուտի
արժեքը) մենք ունենք բարձր արժեքների տիրույթ։
Նորմալ ջերմաստիճանը կլինի 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>
:
Ատրիբուտներ
Ատրիբուտների արժեքը կարող է լինել կոտորակային և բացասական թիվ։
| Ատրիբուտ | Նկարագրություն |
|---|---|
value |
Նշում է ընթացիկ արժեքը։ Պարտադիր ատրիբուտ։ |
min |
Նշում է նվազագույն հնարավոր արժեքը։ Լռելյայն արժեքը՝ 0։ |
max |
Նշում է առավելագույն հնարավոր արժեքը։ Լռելյայն արժեքը՝ 1։ |
low |
Նշում է ցածր արժեքների տիրույթի սահմանը։ Ցածր արժեքները կլինեն min ատրիբուտի արժեքից
մինչև low ատրիբուտի արժեքը։
|
high |
Նշում է բարձր արժեքների տիրույթի սահմանը։ Բարձր արժեքները կլինեն high ատրիբուտի արժեքից
մինչև max ատրիբուտի արժեքը։
|
optimum |
Որոշում է օպտիմալ արժեքների տիրույթը։ |
Տես նաև
-
progressթեգը,
որը ստեղծում է բեռնման ձող։
