Paremman UX n rakentaminen HTML5 Data- * -määritteillä
Oletko koskaan halunnut lisätä mukautettuja tietoja tiettyyn HTML-elementtiin, jotta voit käyttää sitä myöhemmin JavaScriptin avulla? Ennen kuin HTML5 ilmestyi markkinoille, DOM: iin liittyvien mukautettujen tietojen tallentaminen oli todellinen hälytys, ja kehittäjien oli käytettävä kaikenlaisia ikäviä häkkejä, kuten ei-standardien määritteiden käyttöönotto tai vanhentuneen setUserData () -menetelmän käyttäminen ongelman kiertämiseen.
Onneksi sinun ei tarvitse tehdä niin enää, koska HTML5 on ottanut käyttöön uuden globaalin data- * attribuutit, jotka mahdollistavat ylimääräisten tietojen upottamisen HTML-elementteihin. Uusi data- * määritteet tee HTML: n laajennettavaksi, siksi voit rakentaa monimutkaisempia sovelluksia, ja luoda kehittyneempi käyttäjäkokemus tarvitsematta käyttää resurssitehokkaita tekniikoita, kuten Ajax-puheluja tai palvelinpuolen tietokantakyselyjä.
Uusien globaalien määritteiden selaintuki on suhteellisen hyvä, sillä kaikki modernit selaimet tukevat niitä (IE8-10 tukee osittain niitä).
Syntaksi data- * määritteet
Uuden syntaksi data- * määritteet ovat samanlaisia kuin aria-etuliitteiden määritteet. Voit lisätä minkä tahansa pienen merkkijonon * merkki. Sinun täytyy myös määrittää arvo jokaiselle attribuutille merkkijonon muodossa.
Oletetaan, että haluat luoda Meistä ja tallenna sen laitoksen nimi, jossa jokainen työntekijä toimii. Sinun ei tarvitse tehdä mitään muuta kuin sen lisääminen data-osasto mukautettu määrite sopivalle HTML-elementille seuraavalla tavalla:
- John Doe
- Jane Doe
asiakassuhde data- * määritteet ovat maailmanlaajuisia, aivan kuten luokka ja id määritteitä, joten voit käyttää niitä jokaisessa HTML-elementissä. Voit myös lisätä niin monta data- * määrittelee HTML-tunnisteen haluamasi. Yllä olevassa esimerkissä voit esimerkiksi ottaa käyttöön uuden mukautetun määritteen, jota kutsutaan data-käyttäjä tallentaa työntekijän käyttäjätunnuksia.
- John Doe
- Jane Doe
Yleensä, jos haluat lisätä oman mukautetun attribuutin HTML-elementtiin, sinun on aina liitettävä se data- merkkijono. Samoin, kun näet tietokannan määritetyn määritteen jonkun toisen koodissa, voit tietää varmasti, että se on tekijän esittämä mukautettu määrite.
Milloin käyttää ja milloin ei käytetä mukautettuja määritteitä
W3C määrittelee mukautetun data- * määritteet kuten näin:
“Mukautetut tietomääritteet on tarkoitettu tallentamaan yksityisiä yksityisiä tietoja sivulle tai sovellukselle, jolle ei ole enää sopivia määritteitä tai elementtejä.”
On syytä harkita käyttöä data- * määritteet kun et löydä muita semanttisia ominaisuuksia tallennettaville tiedoille.
Se ei ole paras idea käyttää niitä vain muotoilutarkoituksiin, kuten voit valita luokka ja tyyli attribuutteja. Jos haluat tallentaa tietotyypin, jolle HTML5: llä on semanttinen ominaisuus, kuten treffiaika ominaisuus elementti, käytä sitä etukäteen määritetyn määritteen sijasta.
On tärkeää huomata, että data- * attribuutit pitävät tietoja yksityinen sivulle tai sovellukselle, mikä tarkoittaa, että käyttäjäagentit, kuten hakukoneiden robotit ja ulkoiset sovellukset, jättävät ne huomiotta. Tietojen etukäteen määritellyt määritteet voidaan käyttää vain koodilla, joka toimii HTML-sivuston isännöimässä sivustossa.
asiakassuhde data- * Frontend-kehykset, kuten Bootstrap ja Zurb Foundation, käyttävät myös ominaisuuksia laajasti. Hyvä uutinen on, että sinun ei tarvitse välttämättä tietää, miten kirjoittaa JavaScript, jos haluat käyttää etukäteen määrättyjä attribuutteja osana kehystä, koska sinun tarvitsee vain lisätä ne HTML-koodiin, jotta voit käynnistää toiminnon. valmiiksi kirjoitettu JavaScript-laajennus.
Alla oleva koodinpätkä lisää työkalupisteen vasemmalle Bootstrapin painikkeeseen käyttämällä data-ota ja data-sijoitus mukautettuja määritteitä ja määritä niille asianmukaiset arvot.
Kohde data- * Ominaisuudet CSS: n kanssa
Vaikka sitä ei suositella käytettäväksi data- * attribuutit vain muotoilutarkoituksiin, voit valita HTML-elementit, jotka ne kuuluvat, yleisten määritteiden valitsimien avulla. Jos haluat valita jokaisen elementin, jolla on tietty data-etuliite, käytä tätä syntaksi CSS: ssä:
li [data-käyttäjä] väri: sininen;
Huomaa, että käyttäjätunnuksia, jotka näkyvät yllä olevassa koodinpätkässä sinisenä, ei ole - kun kaikki mukautettuihin määritteisiin tallennetut tiedot eivät ole näkyvissä - mutta työntekijöiden nimet ovat elementtejä (esimerkissä “John Doe” ja “Jane Doe”).
Jos haluat vain valita elementtejä, joissa tietolähetyksen määritteellä on tietty arvo, tämä on käytettävä syntaksi:
li [data-osasto = "IT"] border: solid blue 1px;
Voit käyttää kaikkia monimutkaisempia CSS-attribuutinvalitsimia, kuten yleistä sisaruksen yhdistelijän valitsinta ([Data-arvo ~ = "foo"]) tai wildcard-valitsinta ([Data-arvo * = "foo"]), joissa on myös data-etuliitteitä.
Pääsy data- * Ominaisuudet JavaScriptin kanssa
Voit käyttää muokattuja tietoja data- * määrittelee JavaScriptin avulla joko tietokannan ominaisuuden tai jQuery'sin tiedot () menetelmä.
Vanillan JavaScript
aineisto omaisuus on sen omaisuutta HTMLElement Tämä tarkoittaa, että voit käyttää sitä missä tahansa HTML-koodissa. aineisto omaisuus antaa pääsyn kaikkiin tavaroihin data- * annetun HTML-elementin määritteet. Määritteet palautetaan a DOMStringMap joka sisältää yhden merkinnän kullekin data- * ominaisuus.
Meidän Meistä sivun esimerkki voit helposti tarkistaa mukautetut määritteet “Jane Doe” on käyttämällä aineisto omaisuutta seuraavalla tavalla:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap käyttäjä: "janedoe", osasto: "IT" Näet sen palautetussa DOMStringMap objektin data- etuliitteet poistetaan määritteiden nimistä (käyttäjä sijasta data-käyttäjä, ja osasto sijasta data-osasto). Määritelmät on käytettävä samassa muodossa, jos haluat käyttää vain tietyn datan etuliitteen määritteen arvoa (kaikkien mukautettujen määritteiden luettelon sijasta, kuten yllä olevassa koodinpätkässä).
Voit hakea tietyn arvon data- * ominaisuus aineisto omaisuutta. Kuten aiemmin mainitsin, sinun on jätettävä data- etuliite ominaisuuden nimestä, joten jos haluat käyttää Janen arvoa data-käyttäjä määrite, voit tehdä sen tällä tavalla:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQueryn tiedot () menetelmä
tiedot () jQuery-menetelmä mahdollistaa datan etukäteen määritetyn attribuutin arvon. Tässä on myös jätettävä data- etuliite määritteen nimestä, jotta pääset siihen oikein. Esimerkissä voit näyttää hälytysviestin, jossa on laitoksen nimi “jane” toimii seuraavalla koodilla:
$ ("# jane") hover (toiminto () var departement = $ ("# jane"). data ("osasto"), hälytys (osasto);); tiedot () menetelmää on käytettävä huolellisesti, koska se ei ainoastaan toimi datan etukäteen määritetyn attribuutin arvon saamiseksi, vaan myös liittää tiedot DOM-elementtiin seuraavalla tavalla:
var town = $ ("# jane"). data ("kaupunki", "New York"); Lisätiedot, jotka liität jQuery'siin tiedot () menetelmä ei ilmeisesti näy HTML-koodissa uutena data- * Jos molempia tekniikoita käytetään samanaikaisesti, tietty HTML-elementti tallentaa kaksi tietoryhmää, joista toisessa on HTML ja toinen jQuery.
Esimerkissä “jane” sai uuden mukautetun datan ("kaupunki") kanssa jQuery, mutta tämä uusi avainarvopari ei näy HTML: ssä uutena data-town ominaisuus. Tietojen tallentaminen kahdella eri tavalla ei ole paras tapa sanoa vähiten käyttää vain yhtä kahdesta menetelmästä.
Saavutettavuus ja data- * määritteet
Kuten muokattujen tietojen mukaan data- * attribuutit ovat yksityisiä, apuvälineet eivät ehkä pysty käyttämään sitä. Jos haluat säilyttää sisällön vammaisille käyttäjille, ei ole suositeltavaa tallentaa sisältöä, joka voi olla tärkeää tälle käyttäjälle.
