HTML 5 custom data attributes

A HTML 5 szabványba foglalt egyik legkedvesebb részem a custom data attribute lehetősége. Egyrészt azért tetszik, mert nagyon régóta fájó problémát old meg, másrészt mert nem kell megvárni hozzá a HTML 5 szabvány elkészültét, már ma is használható, a korábbi böngészők is elviselik.

Röviden a custom data attributes arra jó, hogy tetszőleges, nem látható információt ágyazzunk be kulturált módon a HTML markupba. Ehhez nem kell más tennünk, mint egy data- kezdetű attribútumot biggyesztenünk a kiszemelt HTML elemhez. Például így:

  <span data-rendezo="Michael Bay">Transformers</span>

Ha erre az adatra később szükségünk van JavaScriptben, akkor akár az element.dataset tulajdonságon keresztül, akár jQuery-vel a data() metóduson keresztül elérhetjük:

  alert( $('span').data('rendezo') );    // --> Michael Bay

Persze a jQuery támogatja az értékek írását, törlését és hozzáadását is. Sőt, akár összetett objektumokat is tehetünk ide, természetesen JSON formában (a tulajdonságok neveit idézőjelbe kell tenni):

  <span id="tr"
    data-film='{ "rendezo": "Michael Bay", "ev": 2007, "moziban": true }'>
    Transformers
  </span>

Kiolvasni nagyon egyszerű:

  var f = $("#tr").data('film');

És ahogy Firebugban is látszik, egy összetett objektumot kapunk vissza, méghozzá nem csak stringekkel, hanem ha lehet, típusokkal (Boolean, Number):

dataAttribute-Firebug

Sokkal jobb, mint JavaScriptbe írni a szerver oldalon előálló adatokat vagy hidden fieldeket generálni, nem?

Ez az a pont, ahol az ember úgy érzi, hogy ennél egyszerűbb és jobb dolog nincs a világon. Csakhogy a specifikáció nagyon pontosan definiálja, hogy hogyan kell kezelni a nagybetűs és a kötőjeles attribútumokat, ami nagyon érdekes hibákat tud eredményezni. Vegyük például ezt:

  <p data-productId="22">...</p>

Talán meglepő, de ez bizony undefined a javából:

  alert( $("p").data("productId") );

Helyesen:

  alert( $("p").data("productid") );

Ez nem bug, főként nem a szerver oldali keretrendszer hibája, hanem feature: úgy működik, ahogy a specifikáció előírja.

A jQuery próbál segíteni a programozói bénaságokon és gyakran többféleképpen is elérhetővé teszi ugyanazt az adatot. Például íme a markup:

  <p data-Id="22">...</p>

Ebből az Id két módon is elérhető:

  $("p").data("id")
  $("p").data("Id")

A Studio is tudja, mi a helyes, mert a Format Document vagy Format Selection parancs kiadásakor kisbetűsre alakítja ezeket az attribútumokat.

Mindenképp érdemes elolvasni azt a pár mondatot a specifikációban, ami erről szól (3.2.3.8 fejezet) és csak akkor használni ezt a lehetőséget, ha értjük is.

Keresztkérdés! Íme a markup:

  <p data-egy="1" 
     data-Ketto="2" 
     data-haromHarom="3" 
     data-Negy-negy="4" 
     data-ot-ot="5" 
     data-hat-Hat="6">...</p>

Milyen tulajdonságai lesznek az alábbi sor után az adat objektumnak?

  var adat = $("p").data();

Íme a megoldás (a szürke kosz egy mini kép, kattints rá a teljes mérethez): Kattints ide a megoldás megtekintéséhez!

 

Technorati-címkék: ,,

3 thoughts on “HTML 5 custom data attributes

  1. Szőke László Zsolt

    Teccik minden, ami deklaratívan definiál do’gokat. Ha kérhetem, még sok hasonló “cikket” tolj!

    Szerinted a HTML5/javascript kedvéért pályaszélre küldi a Microsoft a WPF-et?

    1. Balássy György Szerző

      Én biztos vagyok benne, hogy nem, mindkettőnek megvan a maga létjogosultsága.

      Az már jobb kérdés, hogy a Silverlight kedvéért pályaszélre küldi-e a Microsoft a WPF-et. Itt nagyon sok a találgatás, mert a jelek azt mutatják, hogy a SL sokkal gyorsabban fejlődik és ha ez így folytatódik, akkor előbb-utóbb mindent fog tudni, amit a WPF. De ez még soká lesz. Mi májusban WPF-ben csináltuk meg a Kar új záróvizsgáztató programját, mi hiszünk benne🙂

  2. Visszajelzés: Képfeltöltő webes alkalmazás Yii keretrendszerrel – 10. rész « htmlentities

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s