Jak vytvořit lepší UX s HTML5 Data- * atributy

Chtěli jste někdy přidat vlastní data do určitého elementu HTML, abyste k němu mohli později přistupovat pomocí JavaScriptu? Než se HTML5 objevil na trhu, ukládání vlastních dat spojených s DOM bylo skutečným rozruchem a vývojáři museli používat všechny druhy ošklivých hacků, jako je například zavádění nestandardních atributů nebo použití zastaralé metody setUserData ()..

Naštěstí tak nemusíte dělat, protože HTML5 zavedlo nový globální data-* atributy, které umožňují vkládat další informace o všech prvcích HTML. Nové data-* atributy zpřístupnit HTML, proto vám umožní vytvářet složitější aplikace, a vytvořit sofistikovanější uživatelské prostředí, aniž byste museli používat techniky náročné na zdroje, jako jsou volání Ajax nebo databázové dotazy na straně serveru.

Podpora prohlížečů nových globálních atributů je poměrně dobrá, protože je podporují všechny moderní prohlížeče (IE8-10 je částečně podporuje).

Syntaxe data-* Atributy

Syntaxe nového data-* atributů je podobný atributům předpony árie. Místo vložení můžete vložit libovolný malý řetězec * podepsat. Musíte také přiřadit hodnotu každému atributu ve formě řetězce.

Řekněme, že chcete vytvořit O nás stránky a ukládá název oddělení, kde každý zaměstnanec pracuje. Nemusíte dělat nic jiného, ​​než přidat oddělení dat vlastní atribut příslušnému prvku HTML následujícím způsobem:

 
 
 John Doe 
 
 Jane Doeová 
 

Zvyk data-* atributy jsou globální, stejně jako třída a id atributy, takže je můžete použít na každém elementu HTML. Můžete také přidat tolik data-* atributy HTML tagu, jak chcete. Ve výše uvedeném příkladu můžete například zavést nový vlastní atribut nazvaný uživatele dat ukládat uživatelská jména zaměstnanců.

 
 
 John Doe 
 
 Jane Doeová 
 

Obecně platí, že pokud chcete přidat vlastní atribut do elementu HTML, musíte jej vždy předponovat znakem data- řetězec. Podobně, když se v kódu někoho jiného zobrazí atribut s předponou dat, můžete si být jisti, že je to vlastní atribut zavedený autorem..

Při použití a při použití vlastních atributů

W3C definuje vlastní data-* atributy jako je tato:

“Vlastní datové atributy jsou určeny k ukládání vlastních dat soukromých na stránku nebo aplikaci, pro které neexistují žádné další vhodné atributy nebo prvky.”

Je vhodné zvážit použití data-* atributy Pokud pro data, která chcete uložit, nemůžete najít žádné jiné sémantické atributy.

Není to nejlepší nápad používat je pouze pro účely stylingu, jako je to, které si můžete vybrat z třída a styl atributy. Pokud chcete uložit datový typ, pro který má HTML5 sémantický atribut, například čas schůzky atribut pro elementu, použijte místo atributu prefixu dat.

Je důležité poznamenat, že data-* atributy drží data, která jsou na stránku nebo aplikaci, což znamená, že budou agenty uživatelů ignorovány, jako jsou například vyhledávače a externí aplikace. K atributům předponeným datům může přistupovat pouze kód spuštěný na webu, který je hostitelem kódu HTML.

Zvyk data-* atributy jsou široce používány frontend frameworkem, jako je například Bootstrap a Zurb Foundation. Dobrou zprávou je, že nemusíte nutně vědět, jak zapisovat JavaScript, chcete-li jako součást rámce použít atributy s předponou dat, protože je stačí přidat do kódu HTML, abyste aktivovali funkci předpřipravený plugin pro JavaScript.

Níže uvedený fragment kódu přidává popis nalevo od tlačítka v programu Bootstrap pomocí příkazu přepínání dat a umístění dat vlastních atributů a přiřazení příslušných hodnot.

  Popis vlevo 

cílová data-* Atributy s CSS

I když se nedoporučuje používat data-* atributy pouze pro účely stylingu, můžete pomocí elementárních selektorů atributů vybrat prvky HTML, do kterých patří. Chcete-li vybrat každý prvek, který má určitý atribut předpony dat, použijte tuto syntaxi ve vašem CSS:

 li [data-user] barva: modrá; 

Všimněte si, že se nejedná o uživatelská jména, která budou zobrazena nahoře v útržku kódu výše - poté, co všechna data uložená ve vlastních atributech nejsou viditelná - ale jména zaměstnanců obsažená v části

 li [data-department = "IT"] hranice: modrá modrá 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", oddělení: "IT" 

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe

 $ ("# jane"). hover (function () var department = $ ("# jane"). data ("department"), výstraha (oddělení););

 var town = $ ("# jane"). data ("město", "New York");