acc_calendar: Dostępny kalendarz w JavaScript (niekonieczny, ale przydatny)

acc_calendar: Dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny) | Niquelao Niquelao Jak to mówisz, że ci wyszło? Przejdź do treści Strona główna Sprawdzanie kontrastu HeadingsMap Easyvalidator O mnie… acc_calendar: Dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny) Dostępność i JavaScript? acc_calendar: Dostępny kalendarz w JavaScript (niepotrzebny, ale przydatny) Zaktualizowano 1 czerwca 2008 , przez Rumoroso W polach formularza, w których trzeba wprowadzić datę, aby poprawić doświadczenie użytkownika i jednocześnie zwiększyć kontrolę nad formatem danych, można dodać kalendarz za pomocą JavaScript.

Wiem, zaklęte słowo , ale jeśli zrobi się to ostrożnie i z rozwagą, nie musi mieć negatywnych skutków dla standardów i dostępności. Cele Na początku ustaliłem dwa główne cele, które bardziej niż celami były wytycznymi podczas jego tworzenia: Aby był dostępny i nieinwazyjny. Oczywiście, przy braku obsługi JavaScript nie oferuje się opcji rozwinięcia kalendarza, ale jeśli jest obsługa… Dlaczego nie sprawić, by generowana treść była dostępna i użyteczna? Aby był łatwy do wdrożenia i użytkowania.

Szukałem takiego sposobu, aby programiści, którzy chcą go wdrożyć na swoich stronach internetowych, nie musieli wprowadzać dodatkowego kodu. Tak jak w CSS używa się różnych typów selektorów (elementów, id, klas,…) do przypisywania stylów do różnych części naszych dokumentów, dlaczego nie użyć tego samego do przypisywania zachowań? Ponadto, jako cele drugorzędne są: optymalizacja, generalizacja, internacjonalizacja,… (będąc realistą, musiałem usunąć cele związane z podrywaniem i zarabianiem pieniędzy.) Włączanie do naszych dokumentów Przede wszystkim należy wskazać, że skrypt można uzyskać bezpośrednio, pobierając pełny przykład .

Włączenie kalendarza do naszego dokumentu jest tak proste, jak dodanie odpowiedniego elementu script w head : Kalendarz załaduje się dla każdego pola tekstowego, które ma dodaną klasę „ fecha “ (jeśli językiem dokumentu jest hiszpański). Format daty wprowadza się w pierwszej linii skryptu. Tak więc, jeśli na przykład chcemy, aby data była w kolejności dzień/miesiąc/rok, bez zera przed dniem, gdy składa się on z jednej cyfry, z zerem w miesiącu, gdy jest to konieczne, a format roku miał 4 cyfry: var formato = ‘d/mm/yyyy’; Jak już wspomniano, aby wyświetlić kalendarz obok pola tekstowego, musi ono mieć klasę „fecha”, jeśli językiem zadeklarowanym dla dokumentu jest hiszpański („date”, jeśli jest to angielski, itd.).

Te nazwy klas można modyfikować, dodawać nowe dla innych języków itd. bezpośrednio w skrypcie. Ponadto wszystkie możliwe parametry wprowadza się jako klasy. Pełna lista jest następująca: Ładowanie kalendarza (wymagane): fecha Daty wcześniejsze niż dziś: prev Daty późniejsze niż dziś: post Zakres lat: rangX (gdzie X to liczba lat) Nie uwzględnia się dnia bieżącego: todnact Zastosuj filtr dla dostępnych dat: disp A co jeśli ładuję inputy dynamicznie przez AJAX?

Skrypt ma tę właściwość, że jeśli w dowolnym momencie zostaną wprowadzone nowe pola tekstowe asynchronicznie przez AJAX, wystarczy po tym załadowaniu wywołać funkcję cargaLinks(), aby do inputów zostały przypisane linki do otwarcia kalendarza Pierwszy przykład Data przyszła, w formacie d/mm/yyyy , z tego roku ( class=“fecha post” ) Data przyszła, w formacie d/mm/yyyy, z tego roku bez uwzględnienia dnia dzisiejszego ( class=“fecha post todnact” ) Data urodzenia, w formacie d/mm/yyyy, do 100 lat ( class=“fecha prev rang100” ) data z najbliższych 20 lat, w formacie d/mm/yyyy, bez uwzględnienia dnia dzisiejszego ( class=“fecha post rang20 todnact” ) Data z ostatnich 15 lat, w formacie d/mm/yyyy ( class=“fecha prev rang15” ) Data 10 lat wstecz i w przód, w formacie d/mm/yyyy ( class=“fecha rang10” ) Nowe ulepszenie (kwiecień 2007) Czasami moglibyśmy chcieć, aby data była wprowadzana w trzech polach tekstowych, po jednym dla każdego składnika.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Dodano możliwość zrobienia tego. W tym celu nadal będziemy kontrolować wszystko za pomocą klas przypisanych do input . Aby tworzyły grupę, trzy pola tekstowe muszą dodać kod, który je jako taką identyfikuje.

To, co wydaje się nieco dziwne, nie jest aż tak dziwne. W rzeczywistości trzeba dodać do słowa fecha, którego używamy jako klasy we wszystkich trzech, literę lub cyfrę. Tak więc, na przykład, moglibyśmy zastosować do wszystkich trzech klasę „fechaA” i natychmiast, oprócz przypisania linku do otwarcia kalendarza, zaczną zachowywać się jak grupa. Poniżej znajdują się dwa przykłady, które wyraźnie to pokazują.

Każde z pól musi mieć klasę zależną od przypisanego mu składnika: Dla pola dzień klasa „ day “ Dla pola miesiąc klasa „ month “ Dla pola rok klasa „ year “ Istnieje pełna swoboda w kolejności, w jakiej zostaną umieszczone, przy czym klasy do konfiguracji kalendarza (liczba lat, poprzednie, późniejsze itd.) umieszcza się w pierwszym z użytych pól. W poniższym przykładzie można zobaczyć, jak to zrobić: Drugi przykład Data z najbliższych 10 lat w formacie dzień, miesiąc, rok: Dzień / Miesiąc / Rok Ważną kwestią jest zawsze informowanie użytkownika, które pole jest do czego.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

W przykładzie informuje się o tym w tekście poprzedzającym, a ponadto etykiety inputów to uwzględniają. Data z ostatnich 15 lat w formacie rok, miesiąc, dzień: Rok / Miesiąc / Dzień Ważną kwestią jest zawsze informowanie użytkownika, które pole jest do czego.

W przykładzie informuje się o tym w tekście poprzedzającym, a ponadto etykiety inputów to uwzględniają. Aktualizacja (kwiecień 2007) Skrypt został poprawiony, aby ograniczyć style stosowane z jego poziomu.

Teraz generowany link ma obraz jako treść (wcześniej był on ładowany z arkusza stylów). Link jest generowany natychmiast po inputie (poza label, jeśli jest w nim zawarty) i ma następujące znaczniki: W przypadku, gdy jest to link do ładowania daty w trzech polach tekstowych, klasa linku zmienia się na „ enl_cal_group , a sam link znajduje się przed

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.