Ako vytvoriť lepší UX s atribútmi údajov HTML5 *
Chceli ste niekedy pridať vlastné údaje na konkrétny prvok HTML, aby ste si ho neskôr mohli sprístupniť pomocou jazyka JavaScript? Predtým, ako sa na trhu objavil kód HTML5, ukladanie vlastných údajov súvisiacich s doménou DOM bolo skutočným rozruchom a vývojári museli používať všetky druhy nepríjemných problémov, napríklad zavedenie neštandardných atribútov alebo použitie zastaranej metódy setUserData () na vyriešenie problému.
Našťastie už nemusíte robiť tak, pretože HTML5 predstavil nový globálny data- * atribúty, ktoré umožňujú vložiť ďalšie informácie na ľubovoľné prvky HTML. Nové data- * atribúty HTML rozšíriteľnosť, teda vám umožní vytvárať zložitejšie aplikácie, a vytvoriť sofistikovanejšiu používateľskú skúsenosť bez toho, aby ste museli používať techniky náročné na zdroje, ako sú napríklad hovory Ajax alebo databázové dopyty na strane servera.
Podpora prehliadačov nových globálnych atribútov je relatívne dobrá, keďže sú podporované všetkými modernými prehliadačmi (IE8-10 ich čiastočne podporuje).
Syntax súboru data- * atribúty
Syntax nového data- * atribúty je podobná atribútom aria-prefixed. Môžete vložiť akýkoľvek malý reťazec namiesto reťazca * podpísať. Musíte tiež priradiť hodnotu každému atribútu vo forme reťazca.
Povedzme, že chcete vytvoriť O nás a uložte názov oddelenia, kde každý zamestnanec pracuje. Nemusíte robiť nič iné, okrem pridania dát oddelenia Vlastný atribút na príslušný prvok HTML nasledujúcim spôsobom:
- John Doe
- Jane Doe
zvyk data- * atribúty sú globálne, rovnako ako trieda a id atribúty, takže ich môžete použiť na každom prvku HTML. Môžete tiež pridať toľko data- * atribúty značke HTML, ako chcete. V príklade vyššie môžete napríklad uviesť nový vlastný atribút nazvaný Data-user ukladať používateľské mená zamestnancov.
- John Doe
- Jane Doe
Vo všeobecnosti, ak chcete pridať svoj vlastný atribút elementu HTML, vždy ho musíte predpísať dáta- string. Podobne, keď v inom kóde vidíte atribút s predvoleným údajom, môžete si byť istý, že je to vlastný atribút, ktorý autor uviedol.
Kedy používať a kedy nie je potrebné používať vlastné atribúty
W3C definuje vlastné data- * atribúty, ako napríklad:
“Vlastné atribúty údajov slúžia na ukladanie vlastných údajov súkromných pre stránku alebo aplikáciu, pre ktoré neexistujú žiadne vhodné atribúty alebo prvky.”
Stojí za to zvážiť použitie data- * atribúty keď nemôžete nájsť žiadne iné sémantické atribúty pre údaje, ktoré chcete uložiť.
Nie je to najlepší nápad ich použiť výhradne na účely štýlu, pretože si môžete vybrať z trieda a štýl atribúty. Ak chcete uložiť typ údajov, pre ktoré HTML5 má sémantický atribút, ako je napríklad Dátum Čas atribút pre prvok, použite namiesto atribútu s predponou dát.
Je dôležité si to všimnúť data- * atribúty uchovávajú údaje, ktoré sú súkromné pre stránku alebo aplikáciu, čo znamená, že budú ignorované používateľskými agentmi, ako sú roboty vyhľadávačov a externé aplikácie. Atribúty s predponou pre dáta môžu byť prístupné výhradne prostredníctvom kódu bežiaceho na webe, ktorý je hostiteľom HTML.
zvyk data- * atribúty sú vo veľkej miere používané rámcami frontend, ako napríklad Bootstrap a Zurb Foundation. Dobrou správou je, že nemusíte nutne vedieť, ako písať jazyk JavaScript, ak chcete používať atribúty s predponou dát ako súčasť rámca, pretože stačí ich pridať do kódu HTML, aby ste spustili funkciu predpripravený JavaScriptový plugin.
Útržok kódu nižšie pridá doľava na tlačidlo v Bootstrap nápovedu na návrh pomocou Data-prepínač a Data-placement vlastné atribúty a priradenie príslušných hodnôt.
terč data- * Atribúty s CSS
Aj keď sa neodporúča používať data- * atribúty len na účely stylingu, môžete vybrať prvky HTML, ktoré patria, pomocou všeobecných selektorov atribútov. Ak chcete vybrať každý prvok, ktorý má určitý atribút s predponou dát, použite túto syntax vo svojom CSS:
li [dáta-používateľ] farba: modrá;
Upozorňujeme, že v úryvku kódu sa nezobrazujú mená používateľov, ktoré sú zobrazené modrou farbou - potom, čo sa nezobrazia všetky údaje uložené v vlastných atribútoch - ale mená zamestnancov obsiahnuté v prvky (v príklade “John Doe” a “Jane Doe”).
Ak chcete len vybrať prvky, v ktorých má určitý počet atribútov s prednostným údajom, je to syntax, ktorý chcete použiť:
li [data-department = "IT"] okraj: solid blue 1px;
Môžete použiť všetky zložitejšie atribúty CSS atribútov, ako napríklad všeobecný selektor kombinácie súrodencov ([Data-hodnoty ~ = "foo"]) alebo voľbu zástupných znakov ([Dat hodnota * = "foo"]), s atribútmi predinfikovanými údajmi.
prístup data- * Atribúty pomocou jazyka JavaScript
Môžete pristupovať k údajom uloženým vo vlastnom režime data- * atribúty pomocou jazyka JavaScript buď pomocou vlastností množiny údajov alebo pomocou jQuery dáta () metóda.
Vanilla JavaScript
dataset majetok je majetkom spoločnosti HTML prvok rozhranie, to znamená, že ho môžete použiť na ľubovoľnej značke HTML. dataset Vlastnosť umožňuje prístup ku všetkým vlastným data- * atribúty daného prvku HTML. Atribúty sa vrátia ako DOMStringMap objekt, ktorý obsahuje jednu položku pre každý data- * atribút.
V našom O nás napríklad môžete skontrolovať vlastné atribúty “Jane Doe” má pomocou dataset nehnuteľnosti nasledujúcim spôsobom:
var jane = dokument.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap používateľ: "janedoe", oddelenie: "IT" Môžete to vidieť v vrátenej DOMStringMap namietať dáta- predpony sa odstránia z názvov atribútov (užívateľ namiesto Data-user, a oddelenie namiesto dát oddelenia). Musíte použiť atribúty v rovnakom formáte, ak chcete získať prístup iba k hodnote určitého atribútu s predponou dát (namiesto zoznamu všetkých vlastných atribútov, ako je to vo vyššie uvedenom útržku kódu).
Môžete získať hodnotu konkrétneho data- * atribút ako vlastnosť dataset vlastnosť. Ako som už spomenul, musíte vynechať dáta- predponu z názvu objektu, takže ak chcete získať prístup k hodnote Jane's Data-user atribút, môžete to urobiť takto:
var jane = dokument.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery je dáta () metóda
dáta () Metóda jQuery umožňuje získať hodnotu atribútu s predponou dát. Tu musíte tiež vynechať dáta- predpona z názvu atribútu na prístup k nemu správne. V našom príklade môžete zobraziť výstražnú správu s názvom oddelenia kde “Jane” pracuje s nasledujúcim kódom:
$ ("# jane") hover (funkcia () var department = $ ("jane"). dáta () metóda sa musí používať opatrne, pretože nielenže slúži ako prostriedok na získanie hodnoty atribútu prefixu údajov, ale aj na pripojenie údajov k prvku DOM nasledujúcim spôsobom:
varné mesto = $ ("# jane") údaje ("mesto", "New York"); Dodatočné údaje, ktoré pripojíte s jQuery dáta () metóda sa samozrejme v kóde HTML nezobrazí ako nová data- * atribút, takže ak sa obidve techniky používajú súčasne, daný prvok HTML uloží dve sady údajov, jednu s HTML a druhú s jQuery.
V našom príklade “Jane” dostali nové vlastné údaje ("mesto") s jQuery, ale tento nový pár kľúč-hodnota sa v HTML nezobrazí ako nový Data-město atribútov. Ukladanie údajov dvomi rôznymi spôsobmi nie je najlepšou praxou používajte iba jednu z dvoch metód naraz.
Prístupnosť a data- * atribúty
Vzhľadom k tomu, údaje uchovávané v zvyku data- * atribúty sú súkromné, pomocné technológie nemusia mať prístup k nim. Ak chcete, aby bol váš obsah prístupný pre zakázaných používateľov, neodporúčame vám ukladať obsah, ktorý môže byť dôležitý pre používateľov týmto spôsobom.
