Používanie a štýl HTML5 Meter [Sprievodca]

Ak poznáte priebežný riadok HTML, ktorý ukazuje, koľko aktivity ste vykonali, zistíte, že element meter je podobný - oba zobrazí aktuálnu hodnotu z maximálnej hodnoty. Ale na rozdiel od lišty priebehu, meter meter sa nepoužíva na zobrazenie pokroku.

Používa sa na zobrazenie a statickú hodnotu v určitom rozsahu, napríklad môžete uviesť úložný priestor použitý v úložisku na disku tým, že ukážete, koľko úložného priestoru je naplnený a koľko nie je.

Okrem toho môže byť prvok meradla použitý aj na vizualizáciu až troch oblastí vo svojom rozsahu. Opätovné použitie priestoru pre ukladací priestor, namiesto toho, aby ste ukázali iba to, koľko miesta je obsadené, môžete tiež vizuálne zistiť, či je obsadený priestor len málo vyplnený (povedzme pod 30%) alebo takmer polovičné (od 30 do 60%) alebo viac polovičné plné (nad 60%) v rôznych farbách. To používateľom pomáha zistiť, kedy dosiahnu limit úložiska.

V tomto príspevku vám ukážeme ako štýlový meter pre oba uvedené účely, t.j. jednoduchý rozchod (bez označených oblastí) a dva príklady meradiel s tromi oblasťami označenými farbou. V druhom prípade budeme pracovať vytvára ukazovateľ "značiek" na zobrazenie chudobných, priemerných a dobrých známok a meradlo "pH" na zobrazenie kyslých, neurálnych a alkalických hodnôt pH.

atribúty

Predtým, ako začneme s príkladmi a ideme do hĺbky, poďme sa rýchlo pozrieť do jeho zoznamu atribútov nižšie, viac o týchto atribútoch, ako sú ich predvolené hodnoty atď., Bude zahrnuté v príkladoch.

• hodnota - Hodnota meter element
• min - Minimálna hodnota rozsahu meradla
• max - Maximálna hodnota rozsahu meradla
• nízky - Označuje nízku hraničnú hodnotu
• vysoký - Označuje vysokú hraničnú hodnotu
• optimum - Optimálny bod v dosahu

1. Styling Jednoduchý ukazovateľ

Tu je veľmi jednoduchý príklad používajúci iba jeden atribút, napr hodnota. Než začneme, musíme najprv vedieť tri veci:

(1) Existuje predvolené nastavenie min a max hodnota definujúca rozsah meter, ktorý je 0 a 1. (2) Ak je používateľ zadaný hodnota nespadá do pôsobnosti meter rozsah, bude to mať hodnotu buď min alebo max, podľa toho, ktorý z nich je najbližší. (3) Konečná značka je povinná.

Tu je syntax:

 0,5 

Prípadne môžeme tiež pridať min a max atribúty poskytujúce užívateľom definovaný rozsah ako je tento:

2. Styling Ukazovateľ "Marks"

Najprv treba rozdeliť rozsah do troch oblastí (ľavá / nízka, stredná, pravá / vysoká). Toto bolo nízky a vysoký atribúty vstupujú do hry. Takto sú rozdelené tri regióny.

Tieto tri oblasti sa tvoria medzi min & nízky , nízky & vysoký a vysoký & max.

Teraz je zrejmé, že existujú určité podmienky nízky a vysoký hodnoty pre tri regióny, ktoré sa majú vytvoriť:

• nízky nemôže byť menšia ako min a viac ako vysoký & max
• vysoký nemôže byť väčšia ako max a menej ako nízky & min.
• A keď obe kritériá sú porušené nízky a vysoký bude mať hodnotu inej premennej v kritériách, ktoré nie sú splnené, t.j. ak nízky hodnota je nižšia ako min čo by nemalo byť, nízky dostanete min hodnota.

V tomto príklade budeme brať do úvahy, že naše tri regióny zľava doprava sú:

• Chudobný: (0-33)
• priemerný: (34-60)
• dobrý: (61-100)

Preto sú nasledujúce hodnoty atribútov; min = "0" nízke = "34" vysoké = "60" max = "100".

Tu je obrázok vizualizujúci regióny.

Napriek tomu, že v merači, ktoré sme práve vytvorili, sú tri oblasti, uvádzajú sa v súčasnosti iba dve "druhy" regiónov v dvoch farbách. Prečo? pretože optimum je v strednom regióne.

Optimálny bod

V ktoromkoľvek regióne (z troch) optimum bod spadne, považuje sa to za "optimálnu oblasť", ktorá je štandardne sfarbená zelená. Oblasť (regióny) bezprostredne vedľa neho sa nazýva "suboptimálna oblasť" a je sfarbená oranžovo. Jeden najvzdialenejší je "región, ktorý nie je veľmi optimálny", červené farby.

Doteraz sme v našom príklade neposkytli žiadnu hodnotu optimum. Preto sa predvolená hodnota stáva 50, čo robí stredný región "optimálnym regiónom" a regiónmi, ktoré sú hneď vedľa neho (tak na ľavej a pravej strane) ako "suboptimálne oblasti".

V skratke vo vyššie uvedenom prípade, akákoľvek hodnota pre meter prvok, ktorý spadá do strednej oblasti, je označený zelenou farbou; zvyšok je oranžový.

To nie je to, čo chceme. Chceme, aby bol takto sfarbený: Chudobný (Červená), priemerný (Oranžová), dobrý (zelená)

Keďže pravý región sa má považovať za náš optimálny región, dáme to optimum hodnota, ktorá spadá do pravého regiónu (akákoľvek hodnota medzi 61-100 vrátane 61 a 100).

Na tento príklad vezmeme 90. To urobí správny región "optimálny", stredný (bezprostredne nasledujúci región) "suboptimálny" a ďaleko opustený región, ktorý nie je veľmi optimálny.

To je to, čo dostaneme na náš rozchod.

2. Styling Ukazovateľ "pH"

Najskôr odvzdušnite hodnoty pH. Kyslý roztok má pH nižšie ako 7, alkalický roztok má pH väčšie ako 7 a ak pristanete na 7, je to neutrálne riešenie.

Budeme teda používať nasledujúce hodnoty a atribúty:

low = "7" , vysoká = "7", max = "14", a min bude mať predvolenú hodnotu nula.

Predtým ako pridáme ostatné atribúty na dokončenie kódu, rozhodnime sa o farbách: kyslá (Červená), neutrálne (biela) a alkalický (Modrá). Uvažujme aj kyslú oblasť (ľavú oblasť pod 7) ako "optimálnu"

Tu sú pseudo elementy CSS, na ktoré sa zameriavame, aby sme dosiahli požadovaný obraz firefox. (Pre pseudo elementy webkit meter a ďalšie, pozrite si odkazy uvedené pod odkazom.)

 .ph_meter pozadie: lightgrey; šírka: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar pozadie: indianred; . ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar pozadie: antiquewhite; . ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar pozadie: steelblue;  

Tu je kompletný html kód a konečný výsledok meradla pH.

Referencie

• HTML5 Meter W3C spec
• Zoznam webových pseudo prvkov a tried
• Zoznam pseudo elementov špecifických pre dodávateľa

Viac informácií o spoločnosti Hongkiat: Vytváranie a štýl vývoja s HTML5