Kā veidot labāku UX ar HTML5 Data- * atribūtiem
Vai esat kādreiz vēlējies pievienot pielāgotus datus konkrētam HTML elementam, lai vēlāk piekļūtu tai ar JavaScript? Pirms HTML5 parādījās tirgū, pielāgotu datu, kas saistīti ar DOM, uzglabāšana bija reāls satraukums, un izstrādātājiem bija jāizmanto visa veida šķebinoši hacks, piemēram, ieviešot nestandarta atribūtus vai izmantojot novecojušu setUserData () metodi, lai apietu problēmu.
Par laimi jums vairs nav jādara, jo HTML5 ir ieviesusi jaunu globālu datu- * atribūti, kas ļauj ievietot papildu informāciju par visiem HTML elementiem. Jauno datu- * atribūti padarīt HTML plašāku, tāpēc ļauj veidot sarežģītākas lietotnes, un izveidojiet sarežģītāku lietotāju pieredzi, neizmantojot resursus ietilpīgas metodes, piemēram, Ajax-call vai servera puses datubāzes vaicājumus.
Jauno globālo atribūtu pārlūkprogrammu atbalsts ir salīdzinoši labs, jo tos atbalsta visas mūsdienu pārlūkprogrammas (IE8-10 tos daļēji atbalsta).
Sintakse datu- * Atribūti
Jaunās sintakses datu- * atribūti ir līdzīgi aria-prefiksu atribūtiem. Jūs varat ievietot jebkuru mazo virkni * zīme. Katram atribūtam ir arī jāpiešķir vērtība virknes formā.
Pieņemsim, ka vēlaties izveidot Par mums lapā un saglabājiet tās nodaļas nosaukumu, kurā strādā katrs darbinieks. Jums nav jādara nekas cits, izņemot pievienošanu datu nodaļa pielāgotu atribūtu atbilstošajam HTML elementam šādā veidā:
- John Doe
- Jane Doe
Pielāgots datu- * atribūti ir globāli, tāpat kā klasē un ID atribūtus, lai tos varētu izmantot katrā HTML elementā. Varat arī pievienot tik daudz datu- * atribūti HTML tagam, kā vēlaties. Iepriekš minētajā piemērā, piemēram, varat ievadīt jaunu pielāgoto atribūtu datu lietotājs saglabāt darbinieku lietotājvārdus.
- John Doe
- Jane Doe
Parasti, ja vēlaties HTML elementam pievienot savu pielāgoto atribūtu, jums vienmēr ir jāpiestiprina tas ar datus- virkne. Tāpat, ja kādas citas personas kodu redzat datu prefiksu, jūs varat pārliecināties, ka tas ir autora ieviests pielāgots atribūts.
Kad lietot un kad neizmantot pielāgotos atribūtus
W3C definē pasūtījumu datu- * šādi atribūti:
“Pielāgotie datu atribūti ir paredzēti, lai saglabātu privātus datus privātai lapai vai lietojumprogrammai, kam nav piemērotu atribūtu vai elementu.”
Ir vērts apsvērt iespēju to izmantot datu- * atribūti ja nevarat atrast citus semantiskos atribūtus datiem, kurus vēlaties saglabāt.
Tā nav labākā ideja tos izmantot tikai veidošanas nolūkiem, kā arī to, ko jūs varat izvēlēties no klasē un stils atribūti. Ja vēlaties saglabāt datu tipu, kuram HTML5 ir semantisks atribūts, piemēram, datums Laiks atribūts elementu, izmantojiet to, nevis atribūtu datu prefiksu.
Ir svarīgi to atzīmēt datu- * atribūti satur datus, kas ir privāta uz lapu vai programmu, tas nozīmē, ka lietotāju aģenti, piemēram, meklētājprogrammu roboti un ārējās lietojumprogrammas, tos ignorēs. Datu prefiksu atribūtus var piekļūt tikai ar kodu, kas darbojas vietnē, kurā ir HTML.
Pielāgots datu- * atribūtus plaši izmanto frontendu sistēmas, piemēram, Bootstrap un Zurb Foundation. Labā ziņa ir tā, ka jums nav obligāti jāzina, kā rakstīt JavaScript, ja vēlaties izmantot datu prefiksu atribūtus kā daļu no sistēmas, jo jums tikai jāpievieno tie HTML kodam, lai aktivizētu funkcionalitāti. iepriekš rakstīts JavaScript spraudnis.
Tālāk redzamais koda fragments kreisajā pusē pievieno rīkjoslu uz pogu Bootstrap, izmantojot datu pārslēgšana un datu izvietošana pielāgotus atribūtus un piešķir tiem atbilstošas vērtības.
Mērķis datu- * Atribūti ar CSS
Lai gan tas nav ieteicams lietot datu- * atribūti tikai stila mērķiem, jūs varat izvēlēties HTML elementus, kas pieder pie vispārējiem atribūtu selektoriem. Ja vēlaties atlasīt katru elementu, kam ir noteikts datu prefikss, izmantojiet šo sintaksi savā CSS:
li [datu lietotājs] krāsa: zila;
Ņemiet vērā, ka iepriekšminētajā koda fragmentā tas nav lietotājvārdi, kas tiks attēloti zilā krāsā - pēc tam, kad visi dati, kas saglabāti pielāgotajos atribūtos, nav redzami - bet to darbinieku vārdi, kas atrodas elementiem (piemērā “John Doe” un “Jane Doe”).
Ja vēlaties atlasīt tikai tādus elementus, kuros datu prefiksu atribūtam ir noteikta vērtība, šī ir sintakse, ko izmantot:
li [datu nodaļa = "IT"] robeža: cieta zila 1px;
Varat izmantot visus sarežģītākos CSS atribūtu selektorus, piemēram, vispārējo māsu kombinācijas atlasītāju ([datu vērtība ~ = "foo"]) vai aizstājējzīmes selektoru ([datu vērtība * = "foo"]), arī ar datiem, kuriem ir prefikss.
Piekļuve datu- * Atribūti ar JavaScript
Varat piekļūt muitas režīmā saglabātajiem datiem datu- * atribūti ar JavaScript, izmantojot datu kopas īpašumu vai jQuery's dati () metodi.
Vaniļas JavaScript
The datu kopa īpašums ir tā īpašums HTMLElement Tas nozīmē, ka varat to izmantot jebkurā HTML tagā. The datu kopa īpašums ļauj piekļūt visiem pasūtījumiem datu- * konkrētā HTML elementa atribūti. Atribūti tiek atgriezti kā a DOMStringMap objekts, kas satur vienu ierakstu katram datu- * atribūts.
Mūsu Par mums lapas piemēru var viegli pārbaudīt pielāgotos atribūtus “Jane Doe” ir, izmantojot datu kopa īpašumu šādā veidā:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap lietotājs: "janedoe", nodaļa: "IT" To var redzēt atgrieztajā DOMStringMap objektu datus- prefiksi tiek noņemti no atribūtu nosaukumiem (lietotājs tā vietā datu lietotājs, un nodaļa tā vietā datu nodaļa). Atribūti ir jāizmanto tādā pašā formātā, ja vēlaties piekļūt tikai noteiktā datu prefiksa atribūta vērtībai (nevis visu pielāgoto atribūtu sarakstam, piemēram, iepriekš minētajā koda fragmentā).
Jūs varat iegūt konkrētas vērtības vērtību datu- * atribūtu kā datu kopa īpašums. Kā jau iepriekš minēju, jums ir jāizlaiž datus- prefikss no īpašuma nosaukuma, tādēļ, ja vēlaties piekļūt Jane vērtībai datu lietotājs atribūts, varat to darīt šādi:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's dati () metodi
The dati () jQuery metode ļauj iegūt datu prefiksu atribūta vērtību. Šeit jums arī jāizlaiž datus- prefiksu no atribūta nosaukuma, lai to pareizi piekļūtu. Mūsu piemērā jūs varat parādīt brīdinājuma ziņojumu ar nodaļas nosaukumu “Jane” darbojas ar šādu kodu:
$ ("# jane") hover (funkcija () var departaments = $ ("# jane"). dati ("departaments"); brīdinājums (departaments);); The dati () metode ir jāizmanto uzmanīgi, jo tā ne tikai darbojas kā datu prefiksu atribūta vērtība, bet arī pievieno datus DOM elementam šādā veidā:
var town = $ ("# jane"). dati ("pilsēta", "New York"); Papildu dati, kurus pievienojat ar jQuery's dati () metode acīmredzami netiks parādīta HTML kodā kā jauns datu- * atribūts, tādēļ, ja abas metodes tiek izmantotas vienlaicīgi, attiecīgais HTML elements saglabās divus datu kopumus - vienu ar HTML un otru ar jQuery.
Mūsu piemērā “Jane” ieguva jaunu pielāgotus datus ("pilsēta") ar jQuery, bet šis jaunais atslēgu vērtības pāris netiks parādīts HTML kā jauns datu pilsēta atribūts. Datu glabāšana divos dažādos veidos nav labākā prakse vismazāk tikai vienu no divām metodēm.
Pieejamība un datu- * Atribūti
Kā dati, kas glabājas pēc pasūtījuma datu- * atribūti ir privāti, palīgtehnoloģijas var nebūt pieejamas. Ja vēlaties, lai jūsu saturs būtu pieejams lietotājiem ar invaliditāti, nav ieteicams saglabāt saturu, kas šādā veidā var būt svarīgi lietotājiem.
