Funkcjonalność o której tutaj mowa pojawiła się w specyfikacji HTML5 już dość dawno temu. Mowa tutaj o nowym atrybucie data-*, rozszerzającym elementy HTML o możliwość tworzenia własnych atrybutów do przechowywania danych.
Dotychczas każdy, kto potrzebował przechowywać dodatkowe informacje niewidoczne dla klienta, ale później wykorzystywane na stronie, korzystał z kilku opcji: dodawał niestandardowe atrybuty (co było niezgodne ze specyfikacją), tworzył ukryte pola formularzy lub pobierał te dane z wykorzystaniem XHR.
Tak było wcześniej – często bardzo niewygodnie i niezbyt wydajnie. A jak będzie teraz? Najlepiej zobrazować to na przykładzie.
Tworzymy własne atrybuty w praktyce
Przykładowo, chciałeś dodać do swojej galerii zdjęć bardzo popularny skrypt Lightbox? Tak wyglądał stworzony kod HTML:
1 2 3 4 5 6 7 | <a href="images/01.jpg" rel="lightbox[paryz]" title="Wieża Eiffla"> <img src="images/01.jpg" alt="Wieża Eiffla" /> </a> <a href="images/02.jpg" rel="lightbox[paryz]" title="Wersal"> <img src="images/02.jpg" alt="Wersal" /> </a> |
Jak widzisz, dodano tutaj atrybut rel, którego przeznaczenie jest zupełnie inne (kod nie jest semantyczny). Inną praktyką było wrzucanie takich danych do atrybutu class, co było również nieprawidłowe. Czas to zmienić.
1 2 3 4 5 6 7 | <a href="images/01.jpg" data-gallery="paryz" title="Wieża Eiffla"> <img src="images/01.jpg" alt="Wieża Eiffla" /> </a> <a href="images/02.jpg" data-gallery="paryz" title="Wersal"> <img src="images/02.jpg" alt="Wersal" /> </a> |
Tak napisany kod wygląda przyjemniej, jest zgodny ze standardem, czytelniejszy i łatwiejszy do późniejszego rozszerzania.
JavaScript i obsługa niestandardowych atrybutów
Oczywiście wraz z HTML-owym rozszerzeniem specyfikacji, musi nastąpić rozszerzenie funkcjonalności JavaScript, coby można było obsłużyć nową zabawkę.
Aby dostać się do utworzonych przez nas atrybutów musimy odwołać się do obiektu przez dataset, wg schematu: obiekt.dataset.nazwaAtrybutu. Poniżej przykładowy kod HTML i JavaScript:
1 2 3 | <span id="me" data-birthday="25-07-1988" data-city="Wyrzysk"> Urodziłem się 25 lipca 1988 roku w Wyrzysku. </span> |
1 2 3 | var me = document.getElementById('me'); me.dataset.birthday; // 25-07-1988 me.dataset.city; // Wyrzysk |
Możesz także odwołać się do tak stworzonych atrybutów w tradycyjny sposób, mając pewność, że kod zostanie obsłużony przez wszystkie przeglądarki:
1 2 3 | var me = document.getElementById('me'); me.getAttribute("data-birthday"); // 25-07-1988 me.getAttribute("data-city"); // Wyrzysk |
A może korzystasz z biblioteki jQuery? Biblioteka ta oczywiście zapewniła już wsparcie dla niestandardowych atrybutów (od wersji 1.2.3).
1 2 3 | var me = $('#me'); me.data('birthday'); // 25-07-1988 me.data('city'); // Wyrzysk |
Prościej już chyba być nie może! :-)
Kilka słów podsumowania
Myślę, że powyższa funkcjonalność jest bardzo przydatna – przynajmniej z mojej perspektywy, bo nie raz zdarzało mi się stosować wspomniane obejścia problemu.
Po więcej informacji o tworzeniu niestandardowych odsyłam do specyfikacji. Do samego zaś tworzenia niestandardowych atrybutów (w razie potrzeby) jak najbardziej zachęcam.
Bajer fajny – szczególnie że zdarza się iż nawet w „obejściu” po prostu zabraknie parametrów do wpisywania potrzebnych danych :D
A teraz komentowanie wpisu – bo z niektórymi rzeczami się nie mogę zgodzić.
– rel – co prawda standardowo lightbox używa rel=”lightbox[group]”, jednak nic nie stoi na przeszkodzie zmodyfikowanie JS’a tak, by korzystał z bardziej odpowiedniego zapisu
– zaś wrzucenie lightboxa do class, NIE ZAWSZE jest niezgodne, w momencie gdy anchor dla obrazków używa specyficznej klasy – ma to sens i jest zgodne :)
Przy prostych stronach, rzadko (nie przypominam sobie bym w ogóle) potrzeba dodatkowych parametrów.
W webowych aplikacjach – notorycznie mi brakuje – szczególnie przy …
Wreszcie ktoś zobaczył że tego brakuje i postanowił coś z tym zrobić.
Wielką radość okazuję czytając twój wpis :-D
@Michał: to prawda, nie zawsze wrzucanie takich informacji do class czy nawet rel jest błędne – czasem możemy w ten sposób identyfikować pewne elementy. Można też odpowiednio konfigurować biblioteki w JavaScript. Teraz jednak nie będzie trzeba dodatkowo się kłopotać i mamy oficjalne rozwiązanie :-)
Dla mnie jest to troszkę mało purystyczne, mimo, że bardzo praktyczne. Zdecydowanie bardziej mi odpowiadała by idea xml-owa – jak chce wrzucić jakieś dodatkowe dane, to wrzucam kilka tagów z osobnego namespace’a, tak jak zagnieżdża się SVG czy MathML.
…musi nastąpić rozszerzenie funkcjonalności JavaScript – Rozszerzenie funkcjonalności JavaScript brzmi jak rozszerzenie funkcjonalności samego języka. Chyba bardziej pasuje: rozszerzenie DOM API.
@PakoOrdoniez: zgadzam się, jednak rozszerzanie modelu DOM o nowe metody jest równocześnie rozszerzaniem funkcjonalności samego języka, jeśli dobrze rozumiem. :-)
Zależy jak rozumiesz rozszerzenie funkcjonalności Javascript (Javascript === język programowania). Dla mnie rozszerzenie funkcjonalności języka następuje wraz z nowymi jego wersjami (np C# 2.0 > 3.0 – wiele nowych rzeczy doszło w wersji 3.0). No ale to może kwestia interpretacji – każdy inaczej rozumuje ;)