Jak budować lepsze UX z atrybutami danych HTML5 *
Czy kiedykolwiek chciałeś dodać niestandardowe dane do konkretnego elementu HTML, aby później uzyskać do niego dostęp za pomocą JavaScript? Zanim HTML5 pojawił się na rynku, przechowywanie niestandardowych danych związanych z DOMem było prawdziwym zamieszaniem, a programiści musieli używać wszelkiego rodzaju paskudnych hacków, takich jak wprowadzanie niestandardowych atrybutów lub stosowanie przestarzałej metody setUserData () do obejścia problemu.
Na szczęście nie musisz już tego robić, ponieważ HTML5 wprowadził nowy globalny dane-* atrybuty, które umożliwiają osadzenie dodatkowych informacji na dowolnych elementach HTML. Nowa dane-* atrybuty uczynić HTML bardziej rozszerzalnym, w związku z tym umożliwiają tworzenie bardziej złożonych aplikacji, i stworzyć bardziej wyrafinowane wrażenia użytkownika bez konieczności stosowania technik intensywnie wykorzystujących zasoby, takich jak wywołania Ajax lub kwerendy baz danych po stronie serwera.
Obsługa nowych globalnych atrybutów przeglądarki jest stosunkowo dobra, ponieważ są one obsługiwane przez wszystkie nowoczesne przeglądarki (IE8-10 częściowo je obsługuje).
Składnia dane-* Atrybuty
Składnia nowego dane-* atrybuty są podobne do atrybutów z prefiksem aria. Możesz wstawić dowolny mały napis zamiast * znak. Musisz także przypisać wartość do każdego atrybutu w postaci ciągu.
Powiedzmy, że chcesz utworzyć O nas i zapisz nazwę działu, w którym pracuje każdy pracownik. Nie musisz robić nic innego poza dodaniem dział danych niestandardowy atrybut do odpowiedniego elementu HTML w następujący sposób:
- nieznany z nazwiska
- Jane Doe
Zwyczaj dane-* atrybuty są globalne, podobnie jak klasa i ID atrybuty, dzięki czemu można ich używać na każdym elemencie HTML. Możesz także dodać tyle dane-* atrybuty do znacznika HTML, jak chcesz. W powyższym przykładzie możesz na przykład wprowadzić nowy atrybut niestandardowy o nazwie użytkownik danych do przechowywania nazw użytkowników.
- nieznany z nazwiska
- Jane Doe
Zgodnie z ogólną zasadą, jeśli chcesz dodać własny atrybut niestandardowy do elementu HTML, zawsze musisz poprzedzić go atrybutem dane- strunowy. Podobnie, gdy zobaczysz atrybut prefiksu danych w czyimś kodzie, możesz być pewien, że jest to atrybut niestandardowy wprowadzony przez autora.
Kiedy używać i kiedy nie używać niestandardowych atrybutów
W3C definiuje niestandardowe dane-* takie atrybuty:
“Własne atrybuty danych są przeznaczone do przechowywania prywatnych danych niestandardowych na stronie lub aplikacji, dla których nie ma bardziej odpowiednich atrybutów lub elementów.”
Warto rozważyć użycie dane-* atrybuty kiedy nie możesz znaleźć żadnych innych atrybutów semantycznych dla danych, które chcesz przechowywać.
Nie jest to najlepszy pomysł, aby używać ich wyłącznie do celów stylizacyjnych, ponieważ możesz wybierać spośród klasa i styl atrybuty. Jeśli chcesz przechowywać typ danych, dla którego HTML5 ma atrybut semantyczny, taki jak datetime atrybut dla element, użyj tego zamiast atrybutu z prefiksem danych.
Ważne jest, aby to zauważyć dane-* atrybuty przechowują dane prywatny na stronie lub aplikacji, co oznacza, że będą ignorowane przez aplikacje użytkownika, takie jak boty wyszukiwarki i aplikacje zewnętrzne. Do atrybutów z prefiksem danych można uzyskać dostęp wyłącznie za pomocą kodu działającego w witrynie obsługującej HTML.
Zwyczaj dane-* atrybuty są szeroko stosowane przez frameworki, takie jak Bootstrap i Zurb Foundation. Dobrą wiadomością jest to, że niekoniecznie musisz wiedzieć, jak pisać JavaScript, jeśli chcesz użyć atrybutów z prefiksami danych jako części struktury, ponieważ wystarczy dodać je do kodu HTML, aby uruchomić funkcjonalność wstępnie napisana wtyczka JavaScript.
Poniższy fragment kodu dodaje podpowiedź po lewej stronie do przycisku w Bootstrap, korzystając z przełączanie danych i umieszczanie danych niestandardowe atrybuty i przypisywanie im odpowiednich wartości.
Cel dane-* Atrybuty z CSS
Chociaż nie zaleca się używania dane-* atrybuty tylko do celów stylizacji, możesz wybrać elementy HTML, do których należą, za pomocą ogólnych selektorów atrybutów. Jeśli chcesz wybrać każdy element, który ma określony atrybut prefiksu danych, użyj tej składni w swoim CSS:
li [dane-użytkownik] kolor: niebieski;
Zauważ, że to nie nazwy użytkowników będą wyświetlane na niebiesko we fragmencie kodu powyżej - po tym, jak wszystkie dane zapisane w atrybutach niestandardowych nie będą widoczne - ale nazwy pracowników zawarte w elementy (w przykładzie “nieznany z nazwiska” i “Jane Doe”).
Jeśli chcesz tylko wybrać elementy, w których atrybut poprzedzony danymi przyjmuje pewną wartość, jest to składnia, której należy użyć:
li [data-department = "IT"] border: solid blue 1px;
Możesz użyć wszystkich bardziej skomplikowanych selektorów atrybutów CSS, takich jak selektor ogólnego komendatora rodzeństwa ([data-value ~ = "foo"]) lub selektor znaku wieloznacznego ([data-value * = "foo"]), z atrybutami z prefiksem danych.
Dostęp dane-* Atrybuty z JavaScript
Możesz uzyskać dostęp do danych zapisanych w niestandardowym dane-* atrybuty z JavaScript przy użyciu właściwości zestawu danych lub jQuery dane() metoda.
Vanilla JavaScript
The zestaw danych własność jest własnością HTMLElement interfejs, co oznacza, że możesz go używać na dowolnym tagu HTML. The zestaw danych Właściwość daje dostęp do wszystkich niestandardowych dane-* atrybuty danego elementu HTML. Atrybuty są zwracane jako a DOMStringMap obiekt zawierający jeden wpis dla każdego dane-* atrybut.
W naszym O nas przykład strony można łatwo sprawdzić atrybuty niestandardowe “Jane Doe” ma za pomocą zestaw danych własność w następujący sposób:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", dział: „IT” Widać to na powrocie DOMStringMap obiekt dane- prefiksy są usuwane z nazw atrybutów (użytkownik zamiast użytkownik danych, i departament zamiast dział danych). Musisz użyć atrybutów w tym samym formacie, jeśli chcesz uzyskać dostęp tylko do wartości określonego atrybutu z prefiksem danych (zamiast listy wszystkich atrybutów niestandardowych, takich jak fragment kodu powyżej).
Możesz pobrać wartość określonego dane-* atrybut jako właściwość zestaw danych własność. Jak wspomniałem wcześniej, musisz pominąć dane- prefiks od nazwy nieruchomości, więc jeśli chcesz uzyskać dostęp do wartości Jane's użytkownik danych atrybut, możesz to zrobić w ten sposób:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's dane() metoda
The dane() Metoda jQuery umożliwia uzyskanie wartości atrybutu z prefiksem danych. Tutaj również musisz pominąć dane- prefiks od nazwy atrybutu, aby uzyskać do niego odpowiedni dostęp. W naszym przykładzie możesz wyświetlić komunikat ostrzegawczy z nazwą działu, w którym “Jane” działa z następującym kodem:
$ ("# jane"). hover (function () var department = $ ("# jane"). data ("dział"); alert (dział);); The dane() metoda musi być używana ostrożnie, ponieważ nie tylko działa jako środek do uzyskania wartości atrybutu z prefiksem danych, ale także do dołączenia danych do elementu DOM w następujący sposób:
var town = $ ("# jane"). data ("miasto", "Nowy Jork"); Dodatkowe dane, które dołączasz do jQuery dane() metoda oczywiście nie pojawi się w kodzie HTML jako nowa dane-* atrybut, więc jeśli obie techniki są używane jednocześnie, dany element HTML będzie przechowywać dwa zestawy danych, jeden z HTML, a drugi z jQuery.
W naszym przykładzie “Jane” dostałem nowe niestandardowe dane ("miasto") z jQuery, ale ta nowa para klucz-wartość nie pojawi się w HTML jako nowa miasto danych atrybut. Przechowywanie danych na dwa różne sposoby nie jest najlepszym rozwiązaniem używaj tylko jednej z dwóch metod jednocześnie.
Dostępność i dane-* Atrybuty
Jak dane przechowywane na zamówienie dane-* atrybuty są prywatne, technologie wspomagające mogą nie mieć do nich dostępu. Jeśli chcesz zachować dostęp do treści dla niepełnosprawnych użytkowników, nie zaleca się przechowywania treści, które mogą być ważne dla użytkowników w ten sposób.
