Hogyan készítsünk jobb UX-et HTML5 Data- * attribútumokkal

Voltál már valaha is hozzáadni egyéni adatokat egy adott HTML elemhez, hogy később hozzáférhessen a JavaScript-hez? Mielőtt a HTML5 megjelent volna a piacon, a DOM-hoz kapcsolódó egyéni adatok tárolása valódi felhajtás volt, és a fejlesztőknek mindenféle csúnya hacket kellett használniuk, mint például a nem szabványos attribútumok bevezetése vagy az elavult setUserData () módszer használata a probléma megoldásához.

Szerencsére ezt már nem kell tennie, mivel a HTML5 új globális bevezetést vezetett be adat-* olyan attribútumok, amelyek lehetővé teszik a további információk beágyazását bármely HTML elemre. Az új adat-* attribútumok a HTML bővíthetősége, ebből adódóan lehetővé teszi, hogy összetettebb alkalmazásokat építsenek, és hozzon létre egy kifinomultabb felhasználói élményt anélkül, hogy erőforrás-igényes technikákat, például az Ajax-hívásokat vagy a kiszolgálóoldali adatbázis-lekérdezéseket kellene használnia.

Az új globális attribútumok böngésző támogatása viszonylag jó, mivel az összes modern böngésző támogatja őket (az IE8-10 részben támogatja őket).

A adat-* attribútumok

Az új szintaxisa adat-* Az attribútumok hasonlóak az aria-előtaggal rendelkező attribútumokéhoz. Bármely kisbetűs karakterláncot behelyezhet a helyére * jel. Egy attribútum értékét is meg kell adnia egy karakterlánc formájában.

Tegyük fel, hogy szeretnénk létrehozni egy Rólunk oldalt, és tárolja az egyes alkalmazottak nevét. Nem kell mást tennie, kivéve a data-osztály egyéni attribútum a megfelelő HTML elemhez a következő módon:

 
 
 gipsz Jakab 
 
 Jane Doe 
 

Szokás adat-* Az attribútumok globálisak, mint a osztály és id attribútumokat, így minden HTML elemen használhatja őket. Ön is adhat annyi adat-* attribútumok egy HTML-címkéhez, amennyit csak akar. A fenti példában például új egyéni attribútumot adhat meg, amelyet hívnak adat-felhasználó a felhasználónevek tárolására.

 
 
 gipsz Jakab 
 
 Jane Doe 
 

Általános szabályként, ha saját egyéni attribútumot szeretne hozzáadni egy HTML elemhez, akkor mindig meg kell adnia azt a adat- húr. Hasonlóképpen, ha egy adat-előtag attribútumot lát valaki más kódjában, biztosan tudja, hogy ez a szerző által létrehozott egyéni attribútum.

Mikor kell használni és mikor ne használja az egyéni attribútumokat

A W3C az egyéni beállítást határozza meg adat-* attribútumok, mint így:

“Az egyéni adat attribútumok arra szolgálnak, hogy az egyéni adatokat tárolják az oldalhoz vagy alkalmazáshoz, amelyekhez nincsenek megfelelő attribútumok vagy elemek.”

Érdemes fontolóra venni adat-* attribútumok ha nem talál más szemantikai attribútumot az adatokhoz, amelyeket tárolni szeretne.

Nem a legjobb ötlet, hogy kizárólag stílusos célokra használjuk őket, mint amilyeneket a osztály és a stílus attribútumok. Ha olyan adattípust szeretne tárolni, amelyre a HTML5-nek van egy szemantikai attribútuma, például a dátum idő attribútum a elemet használjuk, az adatkonfigurált attribútum helyett.

Fontos megjegyezni, hogy adat-* attribútumok tartják az adatokat magán az oldalra vagy az alkalmazásra, ez azt jelenti, hogy a felhasználói ügynökök, mint például a keresőrobotok és a külső alkalmazások figyelmen kívül hagyják őket. Az adat-előtaggal rendelkező attribútumok csak a HTML-kódot tartalmazó webhelyen futó kódhoz férhetnek hozzá.

Szokás adat-* az attribútumokat széles körben használják a frontend keretek, mint például a Bootstrap és a Zurb Foundation. A jó hír az, hogy nem feltétlenül kell tudnod, hogyan kell JavaScript-t írni, ha adatkonfigurált attribútumokat szeretne használni egy keretrendszer részeként, mivel csak akkor kell hozzáadni őket a HTML-kódhoz, hogy aktiválhasson egy funkciót. előre írt JavaScript plugin.

Az alábbi kódrészlet egy eszköztippet ad a bal oldali gombbal a Bootstrap gombjához, a data-kapcsoló és a data-elhelyezés egyéni attribútumok, és megfelelő értékek hozzárendelése hozzájuk.

  Tooltip a bal oldalon 

Cél adat-* Attribútumok a CSS-szel

Bár nem ajánlott használni adat-* attribútumok csak stílusos célokra használhatók, kiválaszthatja azokat a HTML elemeket, amelyekhez általános attribútum-választók segítségével tartoznak. Ha meg szeretné választani minden egyes elemet, amely bizonyos adatkódú attribútummal rendelkezik, használja ezt a szintaxist a CSS-ben:

 li [adat-felhasználó] szín: kék; 

Ne feledje, hogy a fenti felhasználó kódjai nem jelennek meg kékben a kódrészletben - miután az összes egyedi attribútumban tárolt adat nem látható - hanem az alkalmazottak nevét a

 li [data-Department = "IT"] border: szilárd kék 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap felhasználó: "janedoe", osztály: "IT" 

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

 $ ("# jane") hover (funkció () var department = $ ("# jane"). adat ("osztály"); figyelmeztetés (osztály););

 var town = $ ("# jane"). adatok ("város", "New York");