Kaip sukurti geresnį UX su HTML5 duomenimis * atributai

Ar kada nors norėjote pridėti priskirtus duomenis į tam tikrą HTML elementą, kad vėliau galėtumėte ją pasiekti naudodami „JavaScript“? Prieš HTML5 atsiradimą rinkoje, su DOM susietų individualių duomenų saugojimas buvo tikras šurmulys, o kūrėjai turėjo naudoti visų rūšių bjaurių hack'ų, pavyzdžiui, nestandartinių atributų įvedimą arba pasenusio setUserData () metodo naudojimą, kad išspręstumėte problemą.

Laimei, jums to nereikia, nes HTML5 pristatė naują pasaulinį duomenų * atributai, leidžiantys įterpti papildomą informaciją apie bet kokius HTML elementus. Nauja duomenų * atributai kad HTML būtų išplėstas, todėl leidžia sukurti sudėtingesnes programas, ir sukurkite sudėtingesnę naudotojo patirtį, nenaudodami daug išteklių naudojančių metodų, tokių kaip „Ajax-call“ arba serverio pusės duomenų bazės užklausos.

Naujų pasaulinių atributų naršyklės palaikymas yra gana geras, nes juos palaiko visos modernios naršyklės (iš dalies IE8-10 juos palaiko).

Sintaksė duomenų * Atributai

Naujosios sintaksė duomenų * atributai yra panašūs į aria-prefiksuotų atributų savybes. Vietoje. \ T * ženklas. Taip pat reikia priskirti vertę kiekvienam atributui eilutės forma.

Tarkime, kad norite sukurti Apie mus puslapyje ir saugokite skyriaus, kuriame dirba kiekvienas darbuotojas, pavadinimą. Jums nereikia nieko daryti, išskyrus pridedant duomenų skyrius priskirtas atributas atitinkamam HTML elementui taip:

 
 
 John Doe 
 
 Jane Doe 
 

Pasirinkta duomenų * atributai yra pasauliniai, kaip ir klasė ir ID atributai, todėl galite juos naudoti kiekviename HTML elemente. Taip pat galite pridėti tiek daug duomenų * atributai HTML žymeniui, kaip norite. Pirmiau pateiktame pavyzdyje, pavyzdžiui, galite įvesti naują priskirtą atributą duomenų vartotojas saugoti darbuotojo vardus.

 
 
 John Doe 
 
 Jane Doe 
 

Paprastai, jei norite pridėti savo pasirinktinį atributą į HTML elementą, visada turite jį pridėti prie duomenis- eilutė. Lygiai taip pat, kai kito asmens kode matote duomenų prefiksuojamą atributą, galite žinoti, kad jis yra autoriaus priskirtas priskirtas atributas.

Kada naudoti ir kada ne naudoti pasirinktinius atributus

W3C apibrėžia įprastą duomenų * tokie atributai:

“Priskirtų duomenų atributai skirti tam tikriems privatiems privatiems duomenims, kurie nėra tinkami atributai ar elementai, saugoti privačiam.”

Verta apsvarstyti galimybę naudoti duomenų * atributai kai nerandate jokių kitų semantinių atributų, kuriuos norite išsaugoti.

Tai ne geriausia naudoti juos tik stiliaus tikslais, kaip ir jūs galite pasirinkti iš klasė ir stilius atributai. Jei norite išsaugoti duomenų tipą, kurio HTML5 turi semantinį atributą, pvz., datetime atributas elementą, naudokite vietoj atributo „Data-prefixed“.

Svarbu tai pažymėti duomenų * atributai turi duomenų privataus prie puslapio ar programos, tai reiškia, kad naudotojų agentai, pvz., paieškos varikliai ir išorinės programos, ignoruos juos. Su duomenimis susieti atributai gali būti pasiekiami tik pagal kodą, kuris rodomas svetainėje, kurioje yra HTML.

Pasirinkta duomenų * atributai yra plačiai naudojami frontendų sistemose, pvz., „Bootstrap“ ir „Zurb Foundation“. Geros naujienos yra tai, kad jums nebūtinai reikia žinoti, kaip parašyti „JavaScript“, jei norite naudoti duomenų, su kuriais susietas duomenų rinkinys, dalį kaip sistemos dalį, nes jums reikia tik pridėti juos prie HTML kodo, kad sukurtumėte „Windows“ funkciją. „JavaScript“ papildinys.

Toliau pateiktame kodo fragmente kairėje pusėje yra įrankių taškas į mygtuką „Bootstrap“, naudodami duomenų perjungimas ir duomenų pateikimas priskirtus atributus, ir priskirti jiems tinkamas vertes.

  „Tooltip“ kairėje 

Tikslas duomenų * Atributai su CSS

Nors tai nerekomenduojama naudoti duomenų * atributai tik stilistiniams tikslams, galite pasirinkti HTML elementus, kuriuos jie priskiria bendrųjų atributų atrankos pagalba. Jei norite pasirinkti kiekvieną elementą, turintį tam tikrą duomenų prefiksą, naudokite šią sintaksę savo CSS:

 li [duomenų vartotojas] spalva: mėlyna; 

Atkreipkite dėmesį, kad pirmiau pateiktame kodo fragmente nėra naudotojų vardų, kurie bus rodomi mėlyna spalva - po to, kai nebus matyti visi pasirinktiniuose atributuose saugomi duomenys, tačiau darbuotojų pavadinimai yra

 li [data-department = "IT"] border: solid blue 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap vartotojas: "janedoe", skyrius: "IT" 

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

 $ ("# jane"). Hover (funkcija () var Department = $ ("# jane"). Data ("departamentas"); įspėjimas (departamentas););

 var town = $ („# jane“) duomenys („miestas“, „Niujorkas“);