Kuidas luua paremat UX HTML5 Data- * atribuutidega
Kas olete kunagi soovinud lisada kohandatud andmeid konkreetsele HTML-elemendile, et hiljem seda JavaScripti kasutada? Enne kui HTML5 ilmus turule, oli DOMiga seotud kohandatud andmete salvestamine tõeline mõnus ja arendajad pidid kasutama kõiki ebameeldivaid häkke, nagu mittestandardsete atribuutide kasutuselevõtmine või vananenud setUserData () meetodi kasutamine probleemi ümber töötamiseks.
Õnneks ei pea te seda enam tegema, sest HTML5 on kasutusele võtnud uue globaalse andmete- * atribuudid, mis võimaldavad lisada HTML-elementidele lisateavet. Uus andmete- * atribuudid muuta HTML laiendatavaks, seepärast võimaldab teil luua keerukamaid rakendusi, ja luua keerukamaid kogemusi ilma ressursimahukate tehnikate, näiteks Ajax-kõnede või serveripoolsete andmebaaside päringute kasutamiseta.
Uute globaalsete atribuutide brauseri tugi on suhteliselt hea, sest neid toetavad kõik kaasaegsed brauserid (IE8-10 toetab neid osaliselt).
Süntaks andmete- * Atribuudid
Uue süntaks andmete- * atribuudid on sarnased aria-prefiksiga atribuutidega. Saate sisestada mõne väikese stringi * märk. Samuti peate määrama igale atribuudile väärtuse stringi kujul.
Oletame, et soovite luua Meist ja salvestage selle osakonna nimi, kus iga töötaja töötab. Sa ei pea midagi muud peale lisama andmekogu kohandatud atribuut sobivale HTML-elemendile järgmisel viisil:
- John Doe
- Jane Doe
Kohandatud andmete- * atribuudid on globaalsed, nagu klassi ja id atribuute, et saaksite neid kasutada iga HTML-elemendi puhul. Võite lisada ka nii palju andmete- * atribuudid HTML-märgisele, kui soovite. Ülaltoodud näites saab näiteks sisestada uue kohandatud atribuudi andmete kasutaja salvestada töötaja kasutajanime.
- John Doe
- Jane Doe
Üldreeglina, kui soovid lisada HTML-elemendile oma kohandatud atribuudi, peate selle alati selle eesliidese eesliidese eesliitega andmeid- string. Samamoodi, kui näete kellegi teise koodi andmesidet, on kindel, et see on autori kasutatav kohandatud atribuut.
Millal kasutada ja millal mitte kasutada kohandatud atribuute
W3C määratleb kohandatud andmete- * sellised atribuudid:
“Kohandatud andmete atribuudid on mõeldud privaatsete privaatsete andmete salvestamiseks lehele või rakendusele, mille jaoks pole enam sobivaid atribuute või elemente.”
Tasub kaaluda selle kasutamist andmete- * atribuudid kui te ei leia ühtegi muud semantilist atribuuti andmetele, mida soovite salvestada.
See ei ole parim idee kasutada neid ainult stiiliks, nii nagu seda saab valida ka klassi ja stiili atribuudid. Kui soovite salvestada andmeliiki, mille HTML5-l on semantiline atribuut, näiteks kuupäev Kellaaeg atribuut elementi, kasutage seda andmesidestatud atribuudi asemel.
See on oluline märkida andmete- * atribuudid hoiavad andmeid privaatselt lehele või rakendusele, see tähendab, et kasutajaagendid ignoreerivad neid, näiteks otsingumootori robotid ja välised rakendused. Andmesidestatud atribuute saab juurde pääseda ainult koodil, mis töötab HTML-i majutaval saidil.
Kohandatud andmete- * atribuute kasutavad laialdaselt ka frontend raamistikud, nagu näiteks Bootstrap ja Zurb Foundation. Hea uudis on see, et te ei pea tingimata teadma, kuidas kirjutada JavaScripti, kui soovid kasutada raamistiku osana andmete eesliidetavaid atribuute, sest peate lisama need HTML-koodi, et käivitada funktsionaalsus. eelkirjutatud JavaScripti plugin.
Allpool olev koodilõik lisab vasakpoolse tööriista nupule Bootstrap, kasutades selleks nuppu andmete vahetamine ja andmete paigutamine kohandatud atribuudid ja neile sobivate väärtuste määramine.
Sihtmärk andmete- * Omadused CSS-iga
Kuigi seda ei soovitata kasutada andmete- * atribuudid ainult stiilimise eesmärgil, saate valida HTML-elemendid, mis nad kuuluvad, üldiste atribuutide valikute abil. Kui soovite valida iga elemendi, millel on teatud andmesidestatud atribuut, kasutage seda süntaksit oma CSS-is:
li [andmekasutaja] värvus: sinine;
Pange tähele, et see pole kasutajanimed, mis kuvatakse koodilõigu sinisel kujul - pärast seda, kui kõik kohandatud atribuutidesse salvestatud andmed ei ole nähtavad - aga nende töötajate nimesid, kes on elemendid (näites “John Doe” ja “Jane Doe”).
Kui soovite ainult valida elemente, mille andmeside ees olev atribuut võtab teatud väärtuse, on see kasutatav süntaks:
li [data-Department = "IT"] border: tahke sinine 1px;
Võite kasutada kõiki keerukamaid CSS atribuutide valikuid, näiteks üldist siblingi kombinatsiooni valijat ([andmeväärtus ~ = "foo"]) või metamärgi valijat ([andmeväärtus * = "foo"]), millel on ka andmesidestatud atribuudid.
Juurdepääs andmete- * Omadused JavaScriptiga
Saate juurdepääsu kohandatud andmetele andmete- * atribuudid JavaScripti abil, kasutades kas andmestiku omadust või jQuery's andmed () meetod.
Vanilla JavaScript
The andmekogum vara kuulub HTMLElement See tähendab, et saate seda kasutada mis tahes HTML-sildil. The andmekogum vara annab juurdepääsu kõigile tavadele andmete- * antud HTML-elemendi atribuudid. Atribuudid tagastatakse kui a DOMStringMap objekt, mis sisaldab iga kirje kohta ühte andmete- * atribuut.
Meie Meist lehekülje näide saate hõlpsasti kontrollida kohandatud atribuute “Jane Doe” on kasutades andmekogum vara:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap kasutaja: "janedoe", osakond: "IT" Sa näed seda tagastatud DOMStringMap objekti andmeid- eesliited eemaldatakse atribuutide nimedest (kasutaja selle asemel andmete kasutaja, ja osakond selle asemel andmekogu). Peate kasutama atribuute samas formaadis, kui soovite ainult juurdepääsu teatud andmeelementide atribuudi väärtusele (kõigi kohandatud atribuutide, nagu ülal toodud koodilõigu, loendi asemel).
Saate saada konkreetse väärtuse andmete- * atribuut kui andmekogum vara. Nagu ma varem mainisin, peate selle välja jätma andmeid- eesliide vara nimest, nii et kui soovite juurdepääsu Jane väärtusele andmete kasutaja atribuut, saate seda teha järgmiselt:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's andmed () meetod
The andmed () jQuery meetod võimaldab saada andmeelementide atribuudi väärtuse. Siin peate ka välja jätma andmeid- õigesti ligipääsuks atribuudi nime ees. Meie näites saate kuvada hoiatusteate, kus on osakonna nimi “Jane” töötab järgmise koodiga:
$ ("# jane") hover (funktsioon () var Department = $ ("# jane"). data ("osakond"); hoiatus (osakond);); The andmed () meetodit tuleb kasutada ettevaatlikult, kuna see ei ole ainult vahend andmesidestatud atribuudi väärtuse saamiseks, vaid ka andmete ühendamiseks DOM-elemendiga järgmiselt:
var town = $ ("# jane"). andmed ("linn", "New York"); Täiendavad andmed, mida jQuery'sega lisate andmed () meetod ei ilmu ilmselt HTML-koodis uutena andmete- * atribuut, nii et kui mõlemat tehnikat kasutatakse samal ajal, salvestab antud HTML-element kaks andmekogumit, millest üks on HTML ja teine jQueryga.
Meie näites “Jane” sain uue kohandatud andmed ("linn") koos jQueryga, kuid seda uut võtmeväärtuse paari ei kuvata HTML-is kui uut andmete linn atribuut. Andmete säilitamine kahel erineval viisil ei ole kõige parem öelda kõige vähem kasutage ainult ühte kahest meetodist korraga.
Kättesaadavus ja andmete- * Atribuudid
Nagu tavapäraselt hoitavad andmed andmete- * atribuudid on privaatsed, abistavad tehnoloogiad ei pruugi sellele juurde pääseda. Kui soovite, et teie sisu oleks puuetega kasutajatele kättesaadav, ei ole soovitatav sellisel viisil kasutajale olulist sisu salvestada.
