Własne atrybuty HTML5

html5

Poziom średnio-zaawansowany

Wiemy zapewne że HTML5 wprowadza nowe atrybuty, ale to nie wszystko. My sami możemy definiować kolejne atrybuty dla naszych potrzeb. W praktyce temat jest ciekawszy niż by się na pierwszy rzut oka wydawało.

Własne atrybuty HTML5

Atrybuty data-* są używane do przechowywania naszych niestandardowych danych dla elementów strony (aplikacji). Możemy umieszczać je w dowolnych elementach HTML.

Na co powinniśmy zwrócić uwagę to:

– nazwy naszych własnych atrybutów HTML5 powinny zaczynać się od prefiksu „data-„, po którym następuje przynajmniej jeden znak,

– nazwa nie powinna zawierać dużych liter,

– wartością może być dowolny ciąg znaków.

Składnia:

<element data-*="somevalue">

W JavaScript do naszego własnego atrybutu odwołamy się zwyczajnie metodą getAttribute().

Przykład praktyczny powinien zilustrować najlepiej działanie atrybutów HTML5 definiowanych przez nas samych.

Przykład – użycie własnych atrybutów HTML5 (custom HTML attributes):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test własnych atrybutów HTML5</title>
    
    <script type="application/javascript">
    function showCarDetails(car) {
        var carBrand = car.getAttribute("data-car-brand");
        alert("The " + car.innerHTML + " => " + carBrand);
    }
    </script>
 </head>
  
 <body>
     <h1>Samochody</h1>
     <p>Kliknij, aby zobaczyć markę samochodu:</p>
     
     <ul style="cursor: pointer; width: 200px;">
         <li onclick="showCarDetails(this)" 
             id="Bora" data-car-brand="VW">Bora</li>
         <li onclick="showCarDetails(this)" 
             id="Cruze" data-car-brand="Chevrolet">Cruze</li>
         <li onclick="showCarDetails(this)" 
             id="Octavia" data-car-brand="Skoda">Octavia</li>
         <li onclick="showCarDetails(this)" 
             id="S60" data-car-brand="Volvo">S60</li>
     </ul>
 </body>
</html>

Przykład online.

Odczyt wartości

Pobranie wartości atrybutu dla poszczególnych elementów wykonuje proste wywołanie JavaScript:

car.getAttribute("data-car-brand");

W programowaniu współczesnych aplikacji takie możliwości mogą znacznie uprościć programowanie różnych funkcjonalności, w tym filtrowania, sortowania, usuwania elementów, itp.

Mało tego możemy tworzyć bardziej zaawansowane aplikacje, a dobry user experience jest osiągalny nawet bez Ajax, ponieważ potrzebne dane możemy mieć dostępne od ręki, „schowane” i czekające na ich użycie.

Ustawianie wartości

Programowe ustawienie wartości dla naszych własnych atrybutów wygląda tak samo, jak w przypadku wszystkich innych atrybutów, to jest za pomocą metody setAttribute(), jak w poniższym przykładzie.

Przykład – ustawianie wartości dla atrybutu:

function showCarDetails(car) {
    car.setAttribute("data-car-brand", "FooBar");
    var carBrand = car.getAttribute("data-car-brand");
    alert("The " + car.innerHTML + " => " + carBrand);
}

Tak zmodyfikowana funkcja wyświetli zawsze „FooBar” jako wartość, ponieważ tak ustawiliśmy ją dla atrybutu przed użyciem (pobraniem wartości tego atrybutu).

Wiele atrybutów i skrót dataset

Czy mogę definiować wiele atrybutów dla jednego elementu? Jak najbardziej.

Rozważmy przykład:

<span id="dominik" data-birthday="27-03-1986" data-place="Stargard">
    Ten element przechowuje datę i miejsce moich urodzin. 
</span>

Przykład – pobranie danych atrybutu standardowo dla JavaScript:

var dominik = document.getElementById('dominik');
alert(dominik.getAttribute("data-birthday"));
alert(dominik.getAttribute("data-place"));

Pobranie danych w ten sposób powinno działać we wszystkich przeglądarkach. Istnieje też rodzaj „skrótu” do danych o nazwie dataset.

Przykład – pobranie danych atrybutu poprzez dataset:

var dominik = document.getElementById('dominik');
alert(dominik.dataset.birthday);
alert(dominik.dataset.place);

Cóż dodać.

jQuery

Pracę w atrybutami wspiera także funkcja data() z jQuery:

https://api.jquery.com/jQuery.data/

Przykładowo:

// dodaj atrybut do elementu i nadaj wartość domyślną
$('#my-input').data('default-value', 'myDefaultVal'); // set

Zatem kod obsługi dla poprzedniego przykładu wyglądał bym w tym przypadku następująco:

var dominik = $('#dominik');
alert(dominik.data('birthday')); // get
alert(dominik.data('place')); // get

Prosto i skutecznie.


Podsumowanie

Mam nadzieję że ten krótki artykuł dał pogląd na to, jak wdzięczni możemy być pomysłodawcom Custom HTML5 data attributes.

Gdy sam użyłem własnych atrybutów HTML5 dla danych po raz pierwszy, w aplikacji nad którą pracowaliśmy w kilka osób, byłem naprawdę mile zaskoczony.

Specyfika aplikacji i zaimplementowany w niej sposób przepływu informacji wytworzyły nam nie lada problem, dla którego idealnym i optymalnym rozwiązaniem było użycie właśnie zdefiniowanych przez nas danych w postaci atrybutów HTML5.

Dziękuję za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook2Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.