DE KRACHT VAN DA­TA AT­TRI­BU­TEN

De ini­eer je ei­gen ele­ment-at­tri­bu­ten voor een zor­ge­loos met­a­da­ta­ma­na­ge­ment en mak­ke­lij­ke­re Ja­vascript en Css-se­lec­tie.

Web Designer Magazine - - Professioneel Programmeren -

Da­ta-at­tri­bu­ten wor­den ge­bruikt om custom met­a­da­ta op te slaan voor een spe­ci ie­ke ele­ment­ver­sie in je code. Het be­schik­baar heb­ben van da­ta in de DOM is han­dig voor de­vel­o­pers, maar er was geen mak­ke­lij­ke ma­nier om dat te doen. Dat heeft ge­leid tot hacks met klas­sen­na­men.

Als je nu ex­tra da­ta van een ele­ment no­dig hebt en er geen be­staand at­tri­buut is dat doet wat je wil, kun je je ei­gen at­tri­buut de in­i­ë­ren in de vorm van <ele­ment da­ta-*=’va­lue’>. De va­lue kan een wil­le­keu­ri­ge string zijn. De at­tri­buut­naam moet in de vorm van da­ta-* zijn en mag al­leen in klei­ne let­ters met schei­dings­streep­jes. Dat wordt heel han­dig ge­con­ver­teerd naar ca­mel­ca­se voor je Ja­vascript. Dan wordt da­ta-moun­tain-height moun­tain­height.

Da­ta-at­tri­bu­ten zijn in al­le hui­di­ge brow­ser­ver­sies ge­ïm­ple­men­teerd, dus er is geen re­den om de voor­de­len niet te ge­brui­ken. Het is wel een valkuil voor lui­heid: custom at­tri­bu­ten moet je niet ge­brui­ken als er een be­staand at­tri­buut of ele­ment is dat de klus ook kan doen. Over­ma­tig ge­bruik kan re­sul­te­ren in code die de voor­de­len van HTML5 niet ge­bruikt en conf­dan con lic­teert met li­bra­ry’s die hun ei­gen custom at­tri­bu­ten ge­brui­ken. Geef ze slim­me na­men.

Da­ta-at­tri­bu­ten kun­nen ge­bruikt wor­den om met­a­da­ta voor items op een lijst op te slaan. Neem bij­voor­beeld een lijst met id=”my­pets” waar­van ie­de­re <li>-tag twee custom da­ta-at­tri­bu­ten heeft.

Daar kun je er zo­veel van ge­brui­ken als je wilt. <ul id=”my­pets”>

<li da­ta-ani­mal-class=”mam­mal” da­ta-ani­mal­na­me=”bri­an”>ti­ger</li>

<li da­ta-ani­mal-class=”bird” da­ta-ani­mal­na­me=”ja­son”>pen­guin</li>

<li da­ta-ani­mal-class=”rep­ti­le” da­ta-ani­mal­na­me=”fe­li­ci­ty”>tor­toi­se</li> </ul> Om die custom at­tri­bu­ten van­uit een script te be­na­de­ren, ge­bruik je ele­ment.ge­tat­tri­bu­te() om de waar­de van de mee­ge­ge­ven at­tri­buut­naam te krij­gen. <script> func­ti­on show­na­me(pet) {

var pet­na­me = pet.ge­tat­tri­bu­te (“da­ta-ani­mal­na­me”);

alert(“this “+ pet.in­ner­ht­ml + “is na­med “+ pet­na­me + “.”);

} </script> <ul id=”my­pets”>

<li on­click=”show­na­me(this)” da­ta-ani­mal­na­me=’bri­an’>ti­ger</li>

<li on­click=”show­na­me(this)” da­ta-ani­mal­na­me=’ja­son’>pen­guin</li>

<li on­click=”show­na­me(this)” da­ta-ani­mal­na­me=’fe­li­ci­ty’>tor­toi­se</li> </ul> Een al­ter­na­tie­ve ma­nier om toe­gang tot de at­tri­bu­ten te krij­gen, is met de pro­per­ty Ht­m­l­ele­ment. da­ta­set. De da­ta­set heeft pro­per­ty’s die over­een­ko­men met de ca­mel­ca­se-con­ver­sie van da­ta-at­tri­bu­ten. In het voor­beeld kun je pet.da­ta­set.ani­mal­na­me ge­brui­ken in plaats van de va­ri­a­be­le pet­na­me. Dat is met na­me han­dig als er meer­de­re da­ta-at­tri­bu­ten voor een ele­ment zijn.

Je kunt je custom at­tri­bu­ten ook be­na­de­ren via CSS en ge­brui­ken om stij­len te ver­an­de­ren met at­tri­buut-se­lec­tors. li[da­ta-ani­mal-class=’mam­mal’] {

co­lor: blue; } li[da­ta-ani­mal-class=’bird’] {

co­lor: red; } li[da­ta-ani­mal-class=’rep­ti­le’] {

co­lor: green; } Da­ta-at­tri­bu­ten staan voor­na­me­lijk in de spe­ci ica­tie om je le­ven als de­vel­o­per een stuk mak­ke­lij­ker te ma­ken. Het is mo­ge­lijk om ze te ge­brui­ken om da­ta aan de ge­brui­ker be­schik­baar te stel­len, bij­voor­beeld voor het ma­ken van tool­tips, maar dat ra­den we toch niet aan.

Er is op dit mo­ment veel dis­cus­sie over het ge­schei­den hou­den van de con­tent en de pre­sen­ta­tie, en wat de rol van da­ta-at­tri­bu­ten bij die schei­ding is – ga er dus met eni­ge voor­zich­tig­heid mee om.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.